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. User Avatar
    Aaron
    Permalink to comment#

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

  2. User Avatar
    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 {
    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. User Avatar
    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?

    • User Avatar
      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. User Avatar
    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. User Avatar
    Pascal C
    Permalink to comment#

    @David
    Huge thanks for the link, very helpful!

  6. User Avatar
    Adeel
    Permalink to comment#

    Any Live Example Please Share!

  7. User Avatar
    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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag