Multiple Backgrounds Syntax

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

#box {
    url(icon.png) top left no-repeat, 
    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 {
		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.


  1. Aaron
    Permalink to comment#

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

  2. Nick
    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 {
    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 which is pretty cool and allows you to write css for specific browsers.

  4. Colchester Printers
    Permalink to comment#

    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#

    Huge thanks for the link, very helpful!

  6. Adeel
    Permalink to comment#

    Any Live Example Please Share!

  7. Justin Lynch
    Permalink to comment#

    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

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.