extend background image height

I am setting a background image in the css as

body{
开发者_JAVA技巧background-image: url('image.jpg');
background-repeat: repeat-x;
}

However, this does not increase the height of the background image as the page height increases. How can this be resolved?

Change repeat-x to repeat, so that it repeats both horizontally and vertically:

body{
background-image: url('image.jpg');
background-repeat: repeat;
}

Repeat-x only repeats horizontally, you want vertically, so either use simply "repeat" (will repeat vertically and horizontally) or "repeat-y" (repeats vertically)

Also if you want to clean up your css and not have 30 different options to effect the background just use (I'm guessing you're using a WYSIWYG editor like Dreamweaver to do your css, I'd suggest and IDE, I use Aptana studio, but there's plenty of good options out there. It'll be easier to avoid a "bloated" style sheet if you avoid WYSIWYG editors)

body{
background: url('image.jpg') repeat-y center top;
}

You can throw a color value in there as well.