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

Solution 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

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

Comments

[user1278496]

Already tried it and it didnt work :(. Thanks for the help tho#

[George]

@user1278496 My only other suggestion was going to be to set the background-color of #container instead of #main

[George]

That is weird, presumably your 'slogan.png' does actually have transparent/translucent pixels?

[user1278496]

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

[Glynne McReynolds]

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?

[user1278496]

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]

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

[Glynne McReynolds]

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.

[user1278496]

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

[Glynne McReynolds]

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.

[user1278496]

Yes. The glow layer is set to overlay over the solid background layer? Thanks for your help anyway dude :)

[Glynne McReynolds]

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