Grow your CSS skills. Land your dream job.

Last updated on:

Multiple Backgrounds Syntax

Browsers that support multiple backgrounds (WebKit from the very early days, Firefox 3+) use a syntax like this:

#box {
  background: 
    url(icon.png) top left no-repeat, 
    url(texture.jpg), 
    url(top-edge.png) top left repeat-y;
}

They are comma separated values and there can be as many as you want with different URL's, positioning, and repeat values. You can even combine WebKit gradients into the mix:

#box {
	background: 
		url(../images/arrow.png) 15px center no-repeat,
		-webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
}

Old school IE on the Mac would display the first background in the list, but other browsers that don't support it fail hard and just display no background. This makes it a hard case for progressive enhancement. That is, unless you use a tool like Modernizr to detect support for it and write a fallback selector which only declares one background for browsers that don't support it.

Comments

  1. Permalink to comment#

    Wow! Did not know that and that’s awesome!

  2. Permalink to comment#

    Worth pointing out that the order seems to be important.

    If you have a repeating image as the background, and a single image thats not repeated, then the repeating image will need to go last, otherwise it will sit on top of the single image.

    For instance:

    #box {
    background:
    url(singlecornerbackground.png) no-repeat 0 0,
    url(repeatingbackground.jpg) repeat 0 0;
    }

    At least in Firefox 3.6. Not tested in other browsers at the moment.

  3. shawn
    Permalink to comment#

    Hi, I was using this for a while until I noticed it’s not supported in IE, it shows neither image:

    background-image: url(‘images/skin.png’), url(images/skin2.png);
    background-position: center top;
    background-color: transparent;
    background-attachment: fixed;
    background-repeat: no-repeat, repeat;

    ever see an IE fix?

    • David
      Permalink to comment#

      IE sucks. You have to use something like modernizr to detect supported functionality of the browser and have conditional styles for those that dont support. You can also try to include this http://rafael.adm.br/css_browser_selector/ which is pretty cool and allows you to write css for specific browsers.

  4. Chris… If you were a girl I’d snog you!!! I’ve been trying to work this one out for ages :)

  5. Pascal C
    Permalink to comment#

    @David
    Huge thanks for the link, very helpful!

  6. Adeel
    Permalink to comment#

    Any Live Example Please Share!

  7. This could also be helpful for anyone that wants to put a custom frame around variable sized content using multiple backgrounds…

    Custom Frame JSFiddle example

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".