Previously we’ve learned the new features of CSS3 and how to make rounded corners with a few simple lines of CSS code. Today I’d like to show another powerful feature – adding multiple background images to an element.

Before it could only be done by adding separate elements and dividing the images between them or using Javascript for it. Either way it wasn’t a pretty way of doing it.

With CSS3 you can define several background images in a single line seperated by a comma. So no more Javascript or messing around with separate elements.

The code

1
2
3

p {
    background: url('left.png') left repeat-y, url('top.png') top right no-repeat;
}

This way you can add several background images to any element you want. Now isn’t that easy?!