背景图片不滚动?

时间:2013-07-13 03:28:47

标签: css scroll background-image

我的背景图片没有向上和向下滚动,否则它向下滚动太远。我希望它向下滚动到背景图像的底部,然后停止。

<head>
<style type='text/css'>
.noWhiteSpace {
margin-left:0;
margin-right:0;
margin-top:0;
background-color:#F4F7E3;
background-image:url('/front_page.jpg');
background-repeat:no-repeat;
background-size:100%;
height:180%;
}
.words {
font-family:Madelinette;
text-align:center;
margin-left:25%;
margin-top:10%;
}
#lineOne {
color:#5f4e2b;
font-size:5em;
}
#lineTwo {
color:#629040;
font-size:4em;
padding-bottom:2%;
}
#otherLines {
color:#952221;
font-size:2em;
}
</style>
</head>
<body class='noWhiteSpace'>
<div class='words'>
<div id='lineOne'>Crafters &nbsp;Resale</div>
<div id='lineTwo'>blah</div>
<div id='otherLines'>blah<br>blah<br>blah<br>blah<br>blah</div>
</div>
</body>

2 个答案:

答案 0 :(得分:0)

background-attachment:默认情况下滚动,您不需要指定。你的图像没有滚动,因为你的身体没有足够的高度尝试在css中明确给出高度或只是在你的身体中添加更多的内容。

希望这会对你有所帮助,但如果你问的不同,请详细说明。

答案 1 :(得分:0)

100%的高度意味着您将显示整个内容,但是内容背景图像不会计入内容(如果您添加img标记,则会计算它)。所以你需要在px中给出与img相同的高度。例如。

.noWhiteSpace {
    height: 2222px; /* I think that was your background-img height */
    /* your other styling .... */
}