Search code examples
cssbackgroundbackground-imagebackground-size

CSS background size on multiple background images

I need to get one of the images to background-size:100%; but keep the other two as auto. I'm unsure how you do this shorthand.

background: url(/assets/images/site/bg-hero-l.svg) left top no-repeat,
            url(/assets/images/site/bg-hero-r.svg) right top no-repeat,
            url(/assets/images/site/hero-banner.jpg) top no-repeat fixed;
Solution

  • From MDN:

    The <bg-size> value may only be included immediately after <position>, separated with the / character, like this: center/80%.

    So you need to do something like this depending on which of those backgrounds need the 100% size:

    background: url(/assets/images/site/bg-hero-l.svg) left top no-repeat,
            url(/assets/images/site/bg-hero-r.svg) right top no-repeat,
            url(/assets/images/site/hero-banner.jpg) top/100% no-repeat fixed;