Ever wanted to apply more than one background image to an element? I rarely get in this situation, but nevertheless it happens from time to time. So since CSS3 we are able to do this a very simple:
.mydiv {
background: url(img1.png) no-repeat 0 0, url(img2.png) no-repeat right bottom;
}
This works just fine for all mayor up-to-date browsers and even on mobile. But if you want to make this work in IE8 or just need more flexibility in positioning your images, there is another way to apply up to three background images. And let’s be honest, have you ever needed more?
The problem with positioning background images is that you can’t define the gap between your image and the right border of your element. You can only say that it should be all the way to the right or define a distance between the left border and your image. Same problem with positioning at the bottom. This can be very frustrating when working with flexible container.
Pseudo elements :before and :after
Ever heard of the pseudo elements :before :after? Both allow you to inject content into your HTML with CSS. Sounds weird, but it’s great. But be aware, it should only be used to inject style-like content. If you want to know more about those pseudo elements, I strongly recommend to watch this talk by Chris Coyier at Front End Design Conference 2011.
So in theory we have an element, which we can give a background image and two pseudo elements, whoch can be an image and therefore function as an background image. The downside is, those can’t be repeated.
Real world example
But let’s say you have a flexible element and you need an image on the left side and the other one 50px from the right side no matter how wide your element gets. (We could also apply a third, repeating image as a normal background image to .mydiv.)
We just use :before and :after, make them as big as the images are and position them where we want them to be. And everything without the need of additional markup.
.mydiv {
position: relative; /* this is needed that the pseudo elements position themselves according to the dimensions of .mydiv instead of body */
width: 70%; /* flexible width */
height: 200px;
}
.mydiv:before,
.mydiv:after {
content: ''; /* you have to define that to make the pseudo elements work */
position: absolute;
top: 0;
}
.mydiv:before {
left: 0;
width: 50px;
height: 70px;
background: url(img1.png);
}
.mydiv:after {
right: 50px; /* positioning this image 50px from the right border of .mydiv wouldn't be possible with 'background' */
width: 60px;
height: 40px;
background: url(img2.png);
}
So that’s it. In the example I used two separate image, but you can also use a sprite, which would be problematic when using the background.
By now I’m very often working with those pseudo elements, not only to apply background images. They are really powerful, but always keep in mind, that CSS is for styling, not massive content creation.
So both ways, classic background images and pseudo elements have pros and cons and you have to decide which way is the best solution for your problem.
If you want to play around with the numbers or just see this thing in action I made a jsfiddle for you.
