Fading Background (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

boonedawg -> Fading Background (3/11/2008 8:30:07)

I am trying to figure out how to make a fading background with css. The sites height varies from page to page and I am unsure how to code this.

Here is an example of what i am trying to accomplish background fade

What I am looking to do is fade the background from white to dark grey. I have attempted to create this effect and it doesn't seem to work.

This is what my website looks like so far.

I want to change the drop shadow effect to the fade effect.



jaybee -> RE: Fading Background (3/11/2008 9:33:50)

Set up an image 1 pixel wide and however high. Fill it with a gradient from white to dark grey.

Set the body background to dark grey if that's what's down the bottom of the gradient.

Apply the jpg as a horizontal repeating background to fill the width of the screen.

As you scroll down the page you'll see the gradient until it runs out at which time the background will take over seamlessly.



boonedawg -> RE: Fading Background (3/11/2008 20:42:17)

thanks for the reply jaybee.

the issue i am having is the page heights vary from page to page. if i create an image for a specific height, say the shorter pages, the longer pages are going to get a large area of grey to the bottom.

is there a way to do this dynamically?



jaybee -> RE: Fading Background (3/11/2008 21:17:42)

Mmmmmm not that I can think of. I suppose it might be possible if you wrote a PHP or ASP script to write the page out and use a different image for the background depending on page length but I can't think of any way you can tell what the page length is.

You might be able to attach the background image to the bottom of a container div and make the page background white so it's all white at the top then gradually goes grey towards the bottom but I can't think of any way to spread it evenly down the page.

The only other possibility and it's not one I normally recommend as it doesn't usually work, is to specify the height as 100% to try and stretch the image. You'll be very lucky if it does though and it probably won't work in all browsers.

On balance I'd go for attaching the image to the bottom of a container div.



Tailslide -> RE: Fading Background (3/12/2008 3:24:43)

The problem though if you try to stretch the image is that the fade effect will look vastly different on different length pages - I'd go for Jaybee's original suggestion as it will have a more unified look.



jaybee -> RE: Fading Background (3/12/2008 5:46:07)


quote:

ORIGINAL: Tailslide

The problem though if you try to stretch the image is that the fade effect will look vastly different on different length pages - I'd go for Jaybee's original suggestion as it will have a more unified look.

That was the other bit I meant to put but it was ridiculous a.m. and I decided to sleep rather than log back in.

The longer the page the worse the image would get. The only way you might possibly get away with that is to use a very hi resolution image but even then, it would depend on exactly how long the page was. There is a limit to how far they'll stretch without getting blocky.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.03125