Grow your CSS skills. Land your dream job.

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,

    Susan

    http://go.a-d-w.com/Homeproof.jpg

    # January 12, 2010 at 6:37 am

    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

    Code:
    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.

*May or may not contain any actual "CSS" or "Tricks".