How do I set the background image size in CSS?

Question

So I have css code as follows:

.jumbobg {
    background: url('http://znc.mane-frame.com/static/silverleaf.png') fixed no-repeat, url('../img/banner-1008444.jpg') no-repeat, grey;
}

I was wondering, for the first image (silverleaf.png) - how would I set the background-size for that particular image, using either pixels (for silverleaf) or auto? I tried with background-size tag, but it would resize all the backgrounds defined above.

No i had two backgrounds. One is silverleaf and the other one is banner-1008444.jpg. — EndenDragon
– EndenDragon, Commented Feb 13, 2016 at 2:31
Possible duplicate of CSS3 Backgrounds - multiple background-size properties — seahorsepip
– seahorsepip, Commented Feb 13, 2016 at 2:43
@seahorsepip, I looked over that, but I didn't understand the answer given. — EndenDragon
– EndenDragon, Commented Feb 13, 2016 at 2:50
it's the same code just the other way around, he wanted only to resize the second instead of the first image. — seahorsepip
– seahorsepip, Commented Feb 13, 2016 at 2:52
@seahorsepip Its not that, I didn't get what cover did, and and answer wasn't clear enough. It didn't explain the coma usage, etc. — EndenDragon
– EndenDragon, Commented Feb 13, 2016 at 2:56

Maciej Kwas · Accepted Answer · 2016-02-13 02:37:54Z

3

The thing is that you have specified two backgrounds in background property (separated with comma), so you have to do the same with background-size to get their distinct values, when you specify only one value in background-size it is applied for both images, to be clear:

background-size: 50px 80px; - this is one value

background-size: 50px 80px, auto; - those are two values

Use comma separator as you did in background, so for example this should work as you want:

background-size: 50px 80px, auto;

edited Feb 13, 2016 at 2:37

answered Feb 13, 2016 at 2:32

Maciej Kwas

6,5473 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maciej Kwas Over a year ago

Read the docs. He was using it in a wrong way, It's different, when you just put a value for all backgrounds and when you specify two values separated with comma.

EndenDragon Over a year ago

Perfect! Just what I need! Very detailed answer, helped me a lot! :)

dippas · Accepted Answer · 2016-02-13 02:43:23Z

3

for multiple backgrounds in the way you are using (shorthand) here is the syntax:

background: [ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

so with that in mind here is an example how to set background-size for the 1st background:

body {
  background: url(http://lorempixel.com/1200/900) repeat-x scroll 0 45px / auto 100%, url(http://lorempixel.com/1200/45) no-repeat scroll center 0 / 100% auto
}

edited Feb 13, 2016 at 2:43

answered Feb 13, 2016 at 2:36

dippas

60.8k15 gold badges125 silver badges134 bronze badges

5 Comments

Maciej Kwas Over a year ago

OP asked for background-size, not background-position

dippas Over a year ago

Ok its almost 3am here I didn't read well at first,. I'll update my answer ASAP @MaciejKwas

Maciej Kwas Over a year ago

That's much better +1 :) However, take under consideration that for a moment it won't work in FF sinse, as far as I know, it doesn't support <bg-position> [ / <bg-size> ] notation, just fyi

dippas Over a year ago

it supports, Im using FF, and use this in my projects for a long time ;)

Maciej Kwas Over a year ago

Oh - I checked and they really did, sorry for confusion :)

Ferrmolina · Accepted Answer · 2016-02-13 02:32:58Z

1

Try this:

background-image: url('http://znc.mane-frame.com/static/silverleaf.png'), url(../img/banner-1008444.jpg);
background-repeat: repeat, no-repeat;
background-position: 0 0;
background-size: 350px 350px, cover;

answered Feb 13, 2016 at 2:32

Ferrmolina

2,7692 gold badges33 silver badges48 bronze badges

Collectives™ on Stack Overflow

How do I set the background image size in CSS?

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related