CSS & backgrounds - why isn't this working?

[dissonance]

Code: Select all

body {
    margin: 0px;
    font-family: sans-serif;
    background-color: #b8cfe6;
    background-image: url('effects/bottomgradient.png');
    background-position: top left;
    background-attachment: fixed;
    background-repeat: repeat-x;
}

bottomgradient.png is a 2x1200 strip of white with the last 96 pixels being a gradient from white to transparent.
I'm trying to make the background blueish, then use the gradient to create a blue to white fuzzything on the bottom of the screen,* but the background comes out as pure white.

edit: w3c's css validator tells me my code is well-formed, so it's not a syntax error.
Blink! Halp!

*In before "why not just make a blue to white image?" I'm doing it this way so I only have to change one or two values in my stylesheet to get an entirely new colorscheme.

[zombie@computer]

got an example online?

[dissonance]

got an example online?

No, I don't, but here's the image in question just in case you'd like to try it.

[zombie@computer]

well, the image is 100% white for me, so that would be a good reason for this not to work.

[vcool]

same here - the image is white.

[dissonance]

well, the image is 100% white for me, so that would be a good reason for this not to work.

Really?
It's a single layer, and this is what it looks like in Gimp. What are you using to view it?

[zombie@computer]

firefox, ie, opera: all white

[dissonance]

Open it in Photoshop or something and lemmie know if it's still white. Browsers have white backgrounds and not checkered ones.

[theblahman]

Just opened it in photoshop and it's pure white. No gradients.. just white.

Might want to check your saving method.

[dissonance]

Just opened it in photoshop and it's pure white. No gradients.. just white.

Might want to check your saving method.

Hmm, will do.

[904]

You might not want to do this, since IE is generally very sloppy with transparent PNGs.

[dissonance]

You might not want to do this, since IE is generally very sloppy with transparent PNGs.

Well, this page/site is going to be running only on a private darknet, so i can make firefox/opera/konqueror/epiphany mandatory.
Otherwise, though, yeah... you're right.

[dissonance]

Yeah, that was it. I really don't know what went wrong the first time I tried saving it, but thanks to everyone who helped out.

edit: screenshot attached.
edit 2: yeah, that's right, that's /fa/. no, that doesn't make me a fag.

[Blink]

Just so you know, you can shorten:

Code: Select all

body {
    margin: 0px;
    font-family: sans-serif;
    background-color: #b8cfe6;
    background-image: url('effects/bottomgradient.png');
    background-position: top left;
    background-attachment: fixed;
    background-repeat: repeat-x;
}

to:

Code: Select all

body {
    margin: 0;
    font-family: sans-serif;
    background: #b8cfe6 url('effects/bottomgradient.png') repeat-x top left;
    background-attachment: fixed;
}

[Rakkerzero]

If you want use only 1 backgroundcolor with a gradient up on it i suggest to use a simple non-tranparancy PNG or JPG with a gradient from white to the preferred blue color. This always works and you don't have to 'mess' with PNG transparency.

If you want to use a backgroundimage with a gradient up on it i suggest to look to this webpage: click here. It has the information you need on this subject.

Good luck.