Can I have two background images and a background color on a CSS element?

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?

I suppose you don't need support for older browsers? – user123444555621 Nov 21 '12 at 23:14 — user123444555621, Nov 21 '12 at 23:14

score 2 · Accepted Answer · edited May 23 '17 at 12:34

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 */
}

score 1 · Answer 2 · answered Nov 21 '12 at 23:12

It's as simple as

#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,
   #35434E;
}

The background property is composed of background-layers, and the final layer can be a color.

Can I have two background images and a background color on a CSS element?

2 Answers2