将div调整为背景图像设置为包含

时间:2013-04-06 16:46:37

标签: html dynamic height background-image

我想知道是否有人可以指出我正确的方向。我有一个带有大背景图像的div。 BG图像设置为包含,因此它将扩展和缩小浏览器大小。我遇到的问题是如果缩小浏览器,div仍会显示高度为1000px。因此,当图像正确扩展以适合时,如果您开始向下滚动,您会看到现在占据身体bg颜色所在图片下方的1000px高度的大间隙(因为图片已经通过包含缩小)。我怎样才能让div向上移动并且差距消失?我已经在几个网站上看到了这一点。

CSS代码:

.contain { background-size: contain; }
.mainsplashtop {
    width:100%;
    height:1000px;
    background-image:url(../images/main_splash.jpg);
    background-repeat:no-repeat;
    margin-top:0;

} 

HTML

<div data-stellar-background-ratio="0.5" class="mainsplashtop contain"><a class="scroll" href="#destination1"></a></div>

你可以在网站上看到我的意思(请不要理会它仍处于早期开发阶段)

www.doyouhaveasaddle.com

以下是我想要实现的例子。 http://www.unbornink.com/ http://www.fmolinari.com

提前致谢。

0 个答案:

没有答案