Multiple background images on the same element

Multiple background images on the same element

Hi, in this article I will show you a nice CSS3 feature. I like write less and do more, write one line code tricks and so on. In my example I used characters from Dragon Ball anime to make it more interesting. The result look like the following picture:


The CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list, so it allows you to set layers of images as the background of your elements. For designs it is more useful than was previously possible.

I set my body background using three images (you can use more than three if you want) and two lines in the CSS file.

Images are only demonstration and I got them from Google Images and the original websites are here:

a) Goku character:

goku.png -

b) Vegeta character:

vegeta.png -

c) The anime landscape as fight background:

bg.jpg -

The CSS code look like the following lines:

body {
    background: url(../images/goku.png) 80% 0 no-repeat, url(../images/vegeta.png) 40% -20% no-repeat, url(../images/bg.jpg) no-repeat;
    background-size: 13%, 16%, 100%;

Each declaration creates a separate layer on your element. Because of that every property have a comma-delimited list as well, so you can use comma-delimited list in the other declarations. For example you can reach the same result using the following lines:

body {
    background: url(../images/goku.png), url(../images/vegeta.png), url(../images/bg.jpg);
    background-size: 13%, 16%, 100%;
    background-position: 80% 0, 40% -20%;
    background-repeat: no-repeat, no-repeat, no-repeat;

As you can see it’s really interesting. You can simply build background layers on the same element.

Thanks and see you soon.

25/03/2014 at 10:40 AM

Zróbcie jeszcze demo i będzie gitara :)
yo !

Łukasz Sudoł To reply on comment
25/03/2014 at 7:06 PM

Ok, dodamy w wolnej chwili. Dzięki!

Leave a Reply

Please fill all required fields

Drag circle to the rectangle on the right!