<body> background image fade

Forum Moderators: not2easy

Message Too Old, No Replies

<body> background image fade

using CSS to createa faded background image

tonynoriega

8:44 pm on Sep 25, 2006 (gmt 0)

how does one create that faded body background that i see on alot of new sites...

you know, its dark at the top then fades to white towards the bottom...

is that some sort of CSS "repeat" technique?

thanks all...

DrDoc

8:49 pm on Sep 25, 2006 (gmt 0)

It's just a background image.

Create a 1×"somebignumber" image in PhotoShop and use the gradient tool.

netchicken1

9:04 pm on Sep 25, 2006 (gmt 0)

Make a very long and very thin line with a gradient in it. It takes up hardly any size.

Then as said above, just use the CSS to create a backgound image and have it repeat in one direction.

easy :)

tonynoriega

9:05 pm on Sep 25, 2006 (gmt 0)

i understand that, but how is it implemented...

do i ahve to make it like 1x2000 pixels...

..and sorry, but im just getting the hand of CSS syntax...

would it be soemthing like

body{
background-image:fade.gif;
background-image:repeat
}

it cant be that simple...or maybe?

Robin_reala

10:10 pm on Sep 25, 2006 (gmt 0)

Well, it's usually something like 1x500 but yeah. Use PNGs btw, they seem to encode gradients really efficiently.

As for the CSS:

body { background: url(gradient.png) repeat-x top; }

jessejump

2:02 am on Sep 26, 2006 (gmt 0)

500 wouldn't cover a page or even the top fold

DrDoc

3:44 am on Sep 26, 2006 (gmt 0)

... depending on whether you just want to fade from one color to the other, or fade back and forth and here and there.

sonjay

3:48 am on Sep 26, 2006 (gmt 0)

Whatever color the very bottom row of pixels is, set that color as the background color. The gradient will fade downward until it ends, then the background color will fill in the rest, regardless of how long the page is.

Setek

4:12 am on Sep 26, 2006 (gmt 0)

Well, it's usually something like 1x500 but yeah. Use PNGs btw, they seem to encode gradients really efficiently.

Unfortunately, if you need to pair that PNG with a normal hex colour (say, you have your gradient light at top, gradually getting darker until the end of the image where you have that flat hex colour,) naturally, IE doesn't render PNGs properly - your PNG could end at #222 and your background colour could be #222, but they don't look like the same colour in IE (6 - I've seen, that's enough for me.)

And, for that very reason, I would use a jpg :)

500 wouldn't cover a page or even the top fold

Depends on what you're designing for? at 800*600, maximised screen you have how much viewport? 770*440?

And, as I have stated above - to make your gradients end nicely, you add a background colour in sync with your image, and it will look good.

[edit]

... and sonjay beat me to the punch :)

[/edit]

[edited by: Setek at 4:13 am (utc) on Sep. 26, 2006]

Robin_reala

6:48 am on Sep 26, 2006 (gmt 0)

Setek - I've noticed gradient gamma problems in Safari on versions of MacOS X less than 10.4, but I've really never had any problems in IE (and I do this a lot). IE completely ignores the gamma chunks of PNGs so I'd be very surprised if it was a problem.

[edited by: Robin_reala at 6:48 am (utc) on Sep. 26, 2006]

DrDoc

7:02 am on Sep 26, 2006 (gmt 0)

Use a gif, and you can safely ignore the gamma problems (not like anyone would notice if the color of the last row is #212121 against your #222222 background).

Setek

7:20 am on Sep 26, 2006 (gmt 0)

Setek - I've noticed gradient gamma problems in Safari on versions of MacOS X less than 10.4, but I've really never had any problems in IE (and I do this a lot). IE completely ignores the gamma chunks of PNGs so I'd be very surprised if it was a problem.

This cannot be conveyed any other way but by image.

<snip>

There's a distinct difference there :)

[edited by: DrDoc at 7:44 am (utc) on Sep. 26, 2006]
[edit reason] Still, no URLs, please. [/edit]

lexipixel

7:22 am on Sep 26, 2006 (gmt 0)

To save my eyesight, I usually keep my monitor brightness a bit "dull".... Sometimes when I do the above described hack, (transistion from a HEX color code to a .GIF or .JPG), that is supposed to be the same color --- it isn't... Just a heads up: if you do try to blend like this, make sure your monitor is calibrated well and spin the brightness knob up and down when you test. Some colors that look like they match when the brightness is dim will show to be defferent when you turn up the brightness.

Also if you are fading to "black" check the RGB/HEX values in the paint program to make sure they are (R=0,G=0,B=0). I've seen pallettes where what your eye thinks is black is actually something like R=0,G=0,B=51 (almost black, but really a very dark blue)..