Question

Is there a way to apply multiple background on a same element with multiple rules ?

For exemple, something like that :

.a { background-image: url( a.jpg ); }
.b { background-image: url( b.jpg ); }

And having two overlapping background on my div :

<div class="a b"></div>

Or is it required to use an inner element ?

Answer 1

Yes, you can have multiple background images on a single element:

.a { background-image: url(a.png), url(a.png);
     background-repeat: repeat-x, repeat-y;
     background-position: 0 0, 0 0; }

Then in the HTML:

<div class="a"></div>