I’m trying to create a web page background that starts with a gradient image across the top, but then continues down with just a tiled background image as needed depending on the length of the content. Below that, I need the background to switch back to another image, as shown in the attached proof.
I’m not sure how to achieve that and I hope I can get some help.
Set your background image as a thin vertical strip with the gradient at the top fading to the colour of the body and repeat it across the page, then use the body colour as the background colour e.g
background: #EDDFBB url(../images/gradientbg.jpg) repeat-x;
Then use another background image for the footer gradient and repeat-x. Your footer will have to be outside the containing div for the text in the main body so that it will stretch across the whole width of the page.