Search code examples
cssbackground-imagebackground-size

How do I set the background image size in CSS?

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.

Solution

  • 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;