The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

web page background

  • # January 11, 2010 at 4:56 pm

    Dear reader,

    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.

    Thanks for your time,


    # January 12, 2010 at 6:37 am

    This reply has been reported for inappropriate content.

    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

    body {
    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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed