Bootstrap&滚动全屏背景图像

时间:2015-02-16 13:03:12

标签: html css twitter-bootstrap background-image

我正在使用Twitter Bootstrap并放置了许多完美的全屏背景图像。今晚我添加了Scrollr到网站,现在背景图像都被炸毁了,我无法弄清楚为什么?

HTML

<header id="top" class="header">
    <div class="container text-vertical-center">
    <div class="row">
            <div class="center-block">
            <div class="padded" style="border: 1px solid white">
        <h1 class="title text-uppercase"><font color="#FFFFFF">Language</font></h1>
        </div>
        </div>
        </div>
        <div class="row">
        <div class="scroll">
        <i class="icon-double-angle-down icon-large"></i>
        </div>
        </div>
        </div>
</header>

CSS

.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/test.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

我还在我的CSS顶部的html和body标签中添加了高度和宽度。

html,
body 
#skrollr-body {
   width: 100%;
   height: 100%;
}

任何想法......?

1 个答案:

答案 0 :(得分:0)

抱歉,无法添加评论。你能描述它现在的样子吗?起初看起来一切都很好。也许可以尝试更改positionabsolute

fixed