Fading Background

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Fading Background

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> Fading Background

Page: [1]


boonedawg Posts: 36 Joined: 4/8/2006 Status: offline	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 Posts: 13784 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to boonedawg)


boonedawg Posts: 36 Joined: 4/8/2006 Status: offline	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? (in reply to jaybee)


jaybee Posts: 13784 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to boonedawg)


Tailslide Posts: 5771 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to jaybee)


jaybee Posts: 13784 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Tailslide)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets >> Fading Background

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts