背景重复-y，但不在页面下方

Question

I have a background image which i need to display vertically as long as the content on the page, but, my background image only shows to the page in view and when I scroll down for the rest of the content the background is not shown in the rest of the page. What am I doing wrong?

css for the background image

#wrapper {
text-align: left;
margin: 0px auto;
border:0;
width: 960px;
height: 100%;
background-image: url('/images_/backgrounds/content_shadow.png');
background-repeat: repeat-y;
}

Answer 1

尝试将背景图片和背景重复规则应用于正文，而不是#wrapper。

Answer 2

My guess is that the wrapper div isn't extending to the bottom of the content either. Try setting the border of wrapper to:

border: 1px solid black;

You might find that the background is behaving just fine, and the div isn't doing what you want.

Answer 3

而是将背景图片样式应用于html {}。

Answer 4

Try adjusting the height property, the 100% is relative to what? Generally i prefer defining height rules with min-height.

Answer 5

remove the height: 100%; from css.