13 replies [Last post]
theatereleven
Offline
newbie
Los Angeles
Last seen: 10 years 38 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2008-07-23
Posts: 8
Points: 8

Hey forum - so it's no big deal to create a page where the main background is blue and the 1000px wide fixed content has a gradient background.

But....how would I have the gradient background start at the top in a light blue, fade to white an then face back into blue at the bottom while allowing the page length to change?

Does that make sense? So this isn't a gradient that fades to a color and then you just specify that color for the remainder of the background for that div. I need to have a new image be introduced on the lower section and always get pushed down with new page content.

Any help appreciated!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

why dont you show us an image

why dont you show us an image of what you want. Avoid hosting on Imageshack if you can help it.

theatereleven
Offline
newbie
Los Angeles
Last seen: 10 years 38 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2008-07-23
Posts: 8
Points: 8

Good idea....here's what I'm

Good idea....below what I'm talking about. so if the page height continued the white area in the middle would expand with the gradient top and bottom staying the same.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

a couple options here. 1. use

a couple options here.

1. use css3 and apply two backgrounds to the container, one top another bottom

2. top image in a parent container, the second image in the footer container.

All images 1px width that repeat x.

theatereleven
Offline
newbie
Los Angeles
Last seen: 10 years 38 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2008-07-23
Posts: 8
Points: 8

Thanks! Here's my problem

Thanks! Here's my problem though (i should have clarified):

The text/page content will bleed into both header and footer gradients. But as I'm typing this I'm realizing I could add a z-index to the content to have it show above the header and footer maybe?

I'm new to CSS and used to tables so my brain isn't thinking pure CSS yet. How can I create the header and footer image backgrounds and then place page content over them that will still push the footer down as needed?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

just apply the top background

just apply the top background to the container that hold the content you want to be on top. get started with the code, then provide us a link when you have it up, and we'll assist you further.

theatereleven
Offline
newbie
Los Angeles
Last seen: 10 years 38 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2008-07-23
Posts: 8
Points: 8

Thanks so much as this is

Thanks so much as this is going to drive me crazy!

The link is below - note: i also need to add a drop shadow to the main page area that is compliant with IE. So I'm attempting that with an image. You'll see it on the left side. My main problem now is the left site is working correctly, but the right....not even close. =(

http://www.theatereleven.com/css-site/index.html

THANK YOU!!!!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

You are approaching this with

You are approaching this with table layouts in mind. forget this structure you have here. not only is this the wrong approach, if you enter content in the middle area, its gets hidden behind the images. Its kinds hard to demonstrate the best way to do this, when you have no content.You said you wanted the content ontop of the gradient backgrounds. thats not what you have here. Add content, logos, text and ill show you what you need to do.

theatereleven
Offline
newbie
Los Angeles
Last seen: 10 years 38 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2008-07-23
Posts: 8
Points: 8

okay man - will do. give me

okay man - will do. give me about 15 minutes. THANK YOU.

theatereleven
Offline
newbie
Los Angeles
Last seen: 10 years 38 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2008-07-23
Posts: 8
Points: 8

Okay - it is uploaded in the

Okay - it is uploaded in the same place:

http://theatereleven.com/css-site/index.html

Thanks so much.

theatereleven
Offline
newbie
Los Angeles
Last seen: 10 years 38 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2008-07-23
Posts: 8
Points: 8

If anyone has any ideas on

If anyone has any ideas on this that would rock....THANK YOU!

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 week 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Add overflow: hidden; to

Add overflow: hidden; to #footer

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 6 years 22 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Remove all your absolute

Remove all your absolute positioning and replace transparent with #FFF in the page background.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

In addition to what the

In addition to what the others suggested, if you want the content to flow over the gradient, you need to rearrange a few things.

1. put the top gradient inside #page

2. put the bottom one inside #content

Dont forget to validate!