Question

Possible Duplicate:
Multiple background-images and a background-color

Can I have two background images and a background color?

Currently I just have this code to achieve the desired effect:

#myelement {
   background: url("http://zbee.me/tz/bottom-right.png") no-repeat right bottom, 
   url("http://zbee.me/tz/top-left.png") no-repeat left top, 
   url("http://zbee.me/tz/bg.png");
}

But I want to use something like this:

#myelement {
   background: url("http://zbee.me/tz/bottom-right.png") no-repeat right bottom, 
   url("http://zbee.me/tz/top-left.png") no-repeat left top;
   background-color: #35434E;
}

Is it possible?

Answer 1

if you are looking to have two images at the same time and they will remain like that then you can look at this post, it explains what you need: Can I have multiple background images using CSS?

Unfortunately you can’t have such combination if you want to manipulate the backgrounds separately, but you can overlap divisions like in layers each with its own background.

Your best shot would be to have two divisions inside a division, each with its own background and position, make sure that the parent is relative and the children absolute:

<div id="wrapper">
  <div id="bg1"></div>
  <div id="bg2"></div>
</div>

CSS:

#wrapper{
 position:relative;
 width:500px;
 height:500px;
 background: /* The bacground color you need */
}

#bg1{
 position:absolute;
 width: 250px;
 height:500px;
 right:0;
 background: /* The bacground you need and position */
}

#bg2{
 position:absolute;
 width: 250px;
 height:500px;
 left:0;
 background: /* The bacground you need and position */
}