2013-07-13 186 views
0

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

<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> 
+0

'background-attachment:scroll'表示它滚动显示内容。如果您的内容不够长,则不会滚动。它不独立于容器。 – kalley

+0

发布你的问题的相关代码,它会帮助我们回答你的问题 – vals

回答

0

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

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

+0

我试图添加100%的高度,并拉伸/冲洗图像。我怎样才能以适合不同屏幕尺寸的方式设置高度?我还尝试在正文结束之前添加一些文本,但并未改变页面的外观。 – user1140067

0

高度为100%意味着您的整个内容将被显示,但哥们背景图像不会被计入内容中(如果您添加img标签,那么它将被计数)。所以你需要给px中的img赋予相同的高度。例如。

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