CODEWITHSUNDEEP
htmlcssbackgroundpsd
user1278496
user1278496

Reputation: 1066

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

enter image description hereI 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:

enter image description here

enter image description here

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;
}

Upvotes: 9

Views: 34838

Answers (4)

Vukašin Manojlović
Vukašin Manojlović

Reputation: 2733

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

Upvotes: 24

Glynne McReynolds
Glynne McReynolds

Reputation: 560

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;
}​

Upvotes: 2

phun-ky
phun-ky

Reputation: 401

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>

Upvotes: 0

George
George

Reputation: 36784

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;

Upvotes: 0

Related Questions