Using a background image on top of a background colour in CSS

Question

I have designed a webpage in PSD and I am in the middle of converting it. Within my main content I have a solid background colour but I have a glow effect on a separate layer which appears on top of the background colour.

I have a container that contains all the code, I have a header, main and footer. Within the main, I have added the solid background colour and also added the background image of the glow which I sliced from PSD. However, the solid background colour doesnt appear to show and it just shows the glow effect. Images below show what it looks like and what it should look like:

---

CSS:

Html {
background: white;
}

#container {
width: 955px;
height: 900px;
margin: 0px auto 0px auto;
}

#main{
background: url(../images/slogan.png) top left no-repeat;
background-color: #282d37;
height: 900px;
width: 955px;
}

Answer 1

You can use multi-background:

#main {
  width: 900px;
  height: 955px;
  background: url(../images/slogan.png) no-repeat, #282d37;
}​

To explain: use background css option, first add image, than background color.

LIVE DEMO

Answer 2

The problem is your styles are overriding each other. You need to put the background-color first, and use background-image instead of background. Declare all the values in their own properties so the background property doesn't override the background-color one.

#main{
  background-color: #282d37;
  background-image: url(../images/slogan.png);
  background-position: left top;
  background-repeat: no-repeat;
  height: 900px;
  width: 955px;
}​

Answer 3

Try replacing

background: url(../images/slogan.png) top left no-repeat;
background-color: #282d37;

With

background: #282d37 url(../images/slogan.png) no-repeat top left;

Answer 4

A way to do this is wrapping the #main element with a wrapper where you set the background color, then set the opacity matching it (if needed)

#mainwrapper{
  background-color: red;
  height:100px;
  width:100px;
}

#main{
  background: url(http://www.w3schools.com/css/klematis.jpg) repeat;
  opacity: 0.6;
  filter:alpha(opacity=60); 
  height:100px;
  width:100px;
}

<div id="mainwrapper">
  <div id="main">
  </div>
</div>