O'Reilly

Multiple Backgrounds with CSS

By on  

Anyone that's been in the web development industry for 5+ years knows that there are certain features that we should have had several years ago. One of those features is the HTML5 placeholder; we used JavaScript shims for a decade before placeholder came along. Another one of those simple features is multiple background images with CSS. Instead we'd need to nest another element for every additional background image. Now we a syntax for supporting multiple background images on one element, and here's what it looks like.

The CSS

Multiple backgrounds involved using multiple property assignments with multiple values, separated by a comma:

#multipleBGs {
	background: url(photo1.png),
				url(photo2.png),
				url(photo3.png)
	;
	background-repeat: no-repeat,
					   no-repeat,
					   repeat-y;
						
	background-position: 0 0,
						 30px 70px,
						 right top;
	
	width: 400px; 
	height: 400px;
	border: 1px solid #ccc;
}

Trying to stuff all properties via shorthand within the background property wont work, unfortunately; multiple property declarations must be used. All of the background properties may be used (background-attachment , background-clip , background-image , background-origin , background-position , background-repeat , background-size), as well as CSS gradients.

Another awesome CSS feature that we can finally used. Using multiple CSS backgrounds is an incredible useful tool, preventing the need for nested elements for the sole purpose of formatting.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

Discussion

  1. Cassy

    This is great!
    What are some of the good ways (without using multiple style sheets files) to compensate for IE8 and lower what don’t support multiple background images?

  2. Jane

    This is great!
    What are some of the good ways (without using multiple style sheets files) to compensate for IE8 and lower what don’t support multiple background images?

  3. I am new to HTML and CSS and do not know much. But trying to learn what I can. Thanks for sharing. It is very helpful to me.

  4. Guy Jeffries

    I managed to make the demo page look like a low res picture by resizing and then maximising in Chrome on a Win XP machine, I’ll be damned if I can repeat the bug so it’s not easy to do but I thought you’d like to know.

  5. Great stuff!! Now you only have to find multiple background images that are all good to look at..

  6. Pritesh Desai

    amazing! which browsers support it?
    they should add support for background scaling, something simple like ‘width’ and ‘height’ for img tag.

  7. Hello I have a question, maybe a hazing.

    I’m trying to make a button with an icon that has a gradient background.

    For example if the gradient of the button define .myButton as follows:

    a.myButton{
           background-image: -moz-linear-gradient(top, #aa393b, #97181f);
    	background-image: -ms-linear-gradient(top, #AA393B, #97181F);
    	background-image: -webkit-gradient(linear, left top, left bottom, from(#AA393B), to(#97181F));
    	background-image: -webkit-linear-gradient(top, #AA393B, #97181F);
    	background-image: -o-linear-gradient(top, #AA393B, #97181F);
    	background-image: linear-gradient(top, #AA393B, #97181F);
    	border-bottom: 1px solid #2E0000;
    }
    

    How did you ary to combine gradient with some icon? in the same button which has an HTML structure as follows:

    <a href='#' class='MyButton'> ... </a>
    

    Currently I am what I am doing with 2 images of the gradient background and something like:

    a.myButton{
    	background:URL(../img_icon.png),URL(../img_background.png);
    	background-repeat:no-repeat,repeat-x;
    	background-position:5px 1px,0 0;
    	padding-left:30px;
    	....
    }
    

    thanks beforehand.

  8. How to add link on backround image in div ?

  9. frantender

    David, here you are using all the images of same size i.e same width and height. What if I want to use multiple background images which have different dimensions which are in a sprite image ? Can I write like background-size: 113px 100px, 80px 90px, 120px 109px; for my 3 different backgrounds ? Specifying only background position won’t work for me because they all are of different dimensions.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...