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!
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.
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.
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.
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?
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.
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. =(
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.
okay man - will do. give me
okay man - will do. give me about 15 minutes. THANK YOU.
Okay - it is uploaded in the
Okay - it is uploaded in the same place:
Thanks so much.
If anyone has any ideas on
If anyone has any ideas on this that would rock....THANK YOU!
Add overflow: hidden; to
overflow: hidden; to #footer
Remove all your absolute
Remove all your absolute positioning and replace transparent with #FFF in the page background.
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!