A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Home » Code Snippets » CSS » Multiple Backgrounds Syntax Submit one!

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.

Subscribe to The Thread

  1. Aaron says:

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

  2. Nick says:

    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 says:

    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?

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---