Help! this is easy im sure

gradient backgrounds

[annettejg]

Can anyone help with my background? i am very new to this

i have created a gradient psp image that is 1600px high and 2px wide and i have created this code in my css file.
body {
background-color: #CCCCCC;
background-image: url(background_gradient.gif);
background-repeat: repeat;

}

for some reason the background repeats 2/3rds down, any way i can stretch the background to fill the browser window?

i bet there is a simple answer, anyone help?

[Robin_reala]

Welcome to WebmasterWorld annettejg!

You can’t stretch graphics in current CSS. Instead of your current code try:

body {
background: #CCC url(background_gradient.gif) repeat-x top;
}

This will repeat your strip along the top of the page and show grey below (which I assume is the bottom colour of your gradient?).

I also took the liberty of a couple of optimisations in your code. First, you can with colours shrink three pairs to three singletons (e.g. #aabbcc becomes #abc). Also, I used background shorthand [w3.org] to keep all the properties in one declaration.

[penders]

...image that is 1600px high and 2px wide...for some reason the background repeats 2/3rds down...

Is that 2/3rds the way down the page content (ie. the page scrolls vertically), or 2/3rds down the browser window?

Although Robin_reala's suggestions are good, I suspect there is something else going on here(?!) - as both versions should work as you have them, I would have thought(?)

Are any other styles set on the BODY or HTML elements? Are any other containers covering the background?