Multiple Backgrounds

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.

 
Tagged: