As stated earlier, I wanted to change the background for my website to make it more interesting. I am going to do this using a method I learned a few years ago, where instead of using a large image for the background (which would put huge loading times on to the site), I will create a 1 pixel wide image with the gradient, and repeat on the x axis to make the whole background have the gradient. I inspected the CSS and HTML structure of the website using the firefox add-on 'firebug' to determine the code I needed to ad was to the 'green_bg.css'.
The original code:
#page_bg {
background: #316B16
}
and I changed it to this:
#page_bg {
background: #fff url(../images/background.gif) repeat-x;
}
The '#fff' changes the background colour to white, so when the page extends below the gradient it will just look as though the gradient is continuing. The rest of the code links the image, then tells the background to repeat on the x axis.
Before:
After:
