Gradient Backgrounds? - Webmaster Forum - Web Design, Programming and SEO forums

09-24-2005, 08:22 AM

Justin761985

Status: Junior Member
Join date: Aug 2005
Location: United States
Expertise:
Software:

Posts: 59

iTrader: 0 / 0%

Justin761985 is on a distinguished road

Send a message via Yahoo to Justin761985

Gradient Backgrounds?

Hello,

I'm wanting to have a background that has three parts..

1.) top gradient fade
2.) normal bg color
3.) gradient fades back out to starting point

Is this possible or do I make sense?

Thanks,
Justin.

09-24-2005, 08:45 AM

Aros

Status: Lurker
Join date: Jul 2004
Location: the Netherlands
Expertise:
Software:

Posts: 1,074

iTrader: 2 / 100%

Aros is on a distinguished road

A picture says more than a thousand words.

09-24-2005, 08:49 AM

Justin761985

Status: Junior Member
Join date: Aug 2005
Location: United States
Expertise:
Software:

Posts: 59

iTrader: 0 / 0%

Justin761985 is on a distinguished road

Hey,

Sorry about that. I want it to look just like it does now here: http://jc1.hdllc.net/~waforum/

But I want it to fade back to back at the very bottom of the site. As it looks at the top.

Thanks again,
Justin.

09-24-2005, 09:57 AM

Aros

Status: Lurker
Join date: Jul 2004
Location: the Netherlands
Expertise:
Software:

Posts: 1,074

iTrader: 2 / 100%

Aros is on a distinguished road

I see, that's not a problem. Use a DIV in the very bottom (footer) with the appropriate background-image and height;

HTML Code:

<div style="background-image: url(bottom_bg.gif); height: 100px"></div>

Although I suggest using the CSS file with a selector instead of an inline style. Best of luck!

09-24-2005, 10:17 AM

Bas

Status: I love this place
Join date: Jan 2005
Location: The Netherlands
Expertise: Frontend, vBulletin
Software: Coda, Photoshop

Posts: 607

iTrader: -1 / 0%

Bas is on a distinguished road

I think you mean this

The CSS for the background colour:

body {
background: #FFFFFF;
}

HTML Code:

<div style="background: url(top.gif) repeat-x top left;">
<div style="background: url(bottom.gif) repeat-x bottom left;">

The remainder of your content here.

</div>
</div>

This will give you a background colour with a backgrund on the top and a background at teh bottom. Just change top.gif and bottom.gif