Question

我想用css和Bootstrap进行网站布局。

我尝试过使用Foundataion FW，我得到了我想要的东西。但是，当我切换到Bootstrap并像以前一样使用相同的代码时。结果不同。

我想将图片全屏布局，背景为此网站http://ottavio.kleis.agency/index.html。

这是我的自定义css：

.intro{
background-image: url(../img/asset/new_bg.jpg);
position: absolute;
height: 100%;
width: 100%;
background-size: cover;

}

HTML：

    <div class="row intro">
        <div class="col-xs-12">
            <h1 class="h2-cover">Ingin belajar Qur'an <strong>gratis?</strong></h1>
            <p class="line-cover">
                Kami akan berikan pelatihan baca Qur'an gratis sepanjang yang Anda mau.
            </p>
            <a href="#" class="button round alert">Mau!</a>
            <a href="#" class="button round morelighter">Benarkah?</a>
        </div>
    </div>

问题是：

图片未全屏
下一个div（例如导航，文章）不在div上，类为.intro。但是，它在div（课程介绍）中。

Answer 1

我有一个解决方案。

问题1）
我所做的是在第一个div下面添加了一个<img>（所以div与类的介绍）。 img有一个bg的分支。

比添加这个css：

.bg{
  position:absolute;
  z-index:-1;
  width:100%;
  height:100%;
}

here你有一个工作小提琴。我添加了很多<br>标签，以证明它有效。

您还可以尝试设置背景图片height:100%和width:auto;。如果你这样做，图像将不会在某些屏幕上挤在一起。

问题2）
我给每张幻灯片一个班slide1。我还添加了所有幻灯片类position:relative;。塔卡看看这个fiddle。

我希望你的问题现在得到了解决。如果您有其他问题，请随时提出。

在标头的全屏图象背景

1 个答案: