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:

  1. create a container div (position: relative)
  2. place multiple divs inside the container (position: absolute)
  3. apply a separate class to each sub-div
  4. The images can each be positioned within the container by using top: 0px; left: 0px;, and with background-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

Tags:

Css