9

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;
}
user1278496
  • 1,056
  • 6
  • 17
  • 34

4 Answers4

22

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

Vukašin Manojlović
  • 2,645
  • 2
  • 21
  • 26
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;
}​
Glynne McReynolds
  • 550
  • 4
  • 17
  • Thanks for that. It still doesnt appear right. I did what you said. I removed the background image to see if the solid background color is still there and it is. I have defo set my slogan.png img to transparent – user1278496 Nov 09 '12 at 11:16
  • http://jsfiddle.net/BzHTe/ - Here's a fiddle with that exact code working. Obviously it's a different image because I don't have yours. Are you sure the PNG is transparent? Can you add the image here? – Glynne McReynolds Nov 09 '12 at 11:21
  • Thats exactly what I want buddy! Check my image that I have uploaded please. In photoshop, im cropping it, saving for the web and saving it as a 24bit png with 'transparency' ticked. And removed all other layers in psd before saving for web – user1278496 Nov 09 '12 at 11:30
  • Just tried your spiral image instead of mine and it works. So obviously I am saving it correctly. Got to be a problem with my image. What though is the question – user1278496 Nov 09 '12 at 11:48
  • I looked at your image in Photoshop, and it doesn't have any transparent pixels, apart from a small band at the top and bottom where a gradient fades to transparent. Is that what you wanted? If any of the rest of the image is supposed to be transparent, it isn't. – Glynne McReynolds Nov 09 '12 at 12:46
  • Ok so why does the image change to what I want in the second image at the top (the darger image) within photoshop with the solid background colour behind it? And why doesnt the same effect appear to happen in a web browser? I just dont get it – user1278496 Nov 09 '12 at 13:46
  • To answer that properly you'd probably need to supply the .PSD - It could be various things. Maybe your top layer is set to multiply or overlay the next layer or something like that. – Glynne McReynolds Nov 09 '12 at 13:48
  • Yes. The glow layer is set to overlay over the solid background layer? Thanks for your help anyway dude :) – user1278496 Nov 09 '12 at 13:55
  • Yeah an overlay will show through the background colour even if it isn't transparent. That's what overlay does. So I imagine your glow layer isn't actually transparent. Can't be much more help than that without seeing the .PSD - Good luck with it man. :D – Glynne McReynolds Nov 09 '12 at 13:57
0

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;
George
  • 36,413
  • 9
  • 66
  • 103
0

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>
phun-ky
  • 351
  • 3
  • 12