标头上的全屏图片背景 [英] Full screen image background on header

问题描述

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

I want to make website layout with css and Bootstrap.

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

I have tried with Foundataion FW and I got what I want. But, when I switch to Bootstrap and use same code like before. The result is different.

我想像本网站一样以图片为背景全屏布局标题 http://ottavio.kleis.agency/index.html 。

I want to layout header full screen with image as background like this site http://ottavio.kleis.agency/index.html.

这是我的自定义CSS：

Here's my custom 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>

问题是：

1. 图片未全屏显示


2. 下一个div（例如Nav，article）不在.intro类的div下方。但是，它在div（类简介）中。

推荐答案

我为您提供了一个解决方案。

I have a solution for you.

问题1）

我所做的是我添加了< img> 在第一个div下方（因此该类具有intro类别）。 img有 bg 。

problem 1)
What I did is I added a <img> below the first div (so the div with the class intro). The img has a clas of bg.

要添加此CSS：

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

在这里，您正在工作的小提琴琴。我添加了很多< br> 标记以向您展示它的工作原理。

here you have a working fiddle. I added a lot of <br> tags to show you it works.

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

You can also try to set the background image height:100% and width:auto;. If you do this the image won't be so crammed together on some screens.

问题2）

我给每个幻灯片一个类 slide1 。我还向所有幻灯片类添加了 position：relative; 。来看看这个小提琴。

problem 2)
I Gave every slide a class slide1. I also added to all the slide classes position:relative;. Taka a look at this fiddle.

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

i hope your question is now anwsered. If you have other problems, feel free to ask.

这篇关于标头上的全屏图片背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！