将背景图像作为新节添加到引导站点

Question

一直在努力尝试添加一个背景图像到我的引导网站。我正试着把它夹在两个现有的部分之间。

当检查许多带有背景图像的主页时，他们在HTML和CSS中既有类，也有样式代码。

这就是我要添加的东西类型，不包括滑块http://themesquared.com/flathost（div类是jumbotron刊头）http://themesquared.com/flathost/wp-content/uploads/2015/03/header-bg.jpg

为了将文本覆盖到背景图像，我是否需要按以下顺序：容器、行类、背景图像类、覆盖文本类

有背景图像的CSS和HTML中都需要的样式吗？

<div class="solution5">
<div class="container">
<div class="row">
<div class="col-12">
<div class="col-6 push-1"><a href="/link1">
<h1>Link text</h1><h2>2nd text block</h2>
<a href="/link2" class="Link2">Up to 40% off</a>
<a href="/link3" class="Link3">Discover more</a>
<a href="/link4" class="col-3 push-1"><ul class="Link4"><li>Free Bag</li>     <li>Free Delivery</li></ul></a>
</div>
</div>
</div>
</div>
</div>

css prettyprint-override">.solution5 {
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
z-index: 20;
background-image: url(http://example.com/img/solution5.jpg);
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-position: 50% 0%;
background-repeat: no-repeat;

Answer 1

你的意思是这样：

.solution5 {
  background: url('http://themesquared.com/flathost/wp-content/uploads/2015/03/header-bg.jpg');
  background-size: cover;
}

演示->http://jsfidle.net/mmcgaweb/

关于来自MDN的background-size:cover:

cover：与contain相反的关键字。缩放图像尽可能大，并保持图像纵横比（图像不会被压扁）。图像“覆盖”容器的整个宽度或高度。当图像和容器具有不同的尺寸时，图像被剪切为左/右或顶部/底部。