With CSS, can I set multiple backgrounds from different classes?
There's no way to merge the background
attribute using multiple classes -- it can only be set once. What you could do is:
- create a container div (
position: relative
) - place multiple divs inside the container (
position: absolute
) - apply a separate class to each sub-div
- The images can each be positioned within the container by using
top: 0px; left: 0px;
, and withbackground-position
.
Here's an example of what I mean:
HTML
<div class="container">
<div class="first"></div>
<div class="second"></div>
</div>
CSS
html, body { height: 100%; }
div {
display: inline-block;
width: 400px;
height: 100px;
}
.container {
position: relative;
}
.first, .second {
position: absolute;
left: 0;
top: 0;
}
.first {
background: url(http://lorempixel.com/200/100/sports/1) no-repeat;
}
.second {
background: url(http://lorempixel.com/200/100/sports/2) no-repeat;
background-position: right center;
}
http://jsfiddle.net/32G4A/2