如何制作动态背景图片大小？

Question

是否可以使用css使截面的高度适合背景的高度？

现在它占据了部分内容的高度。

CSS：

.content-block {
  background-size: cover;
  background-position: center center;
}

HTML：

<section id="header-section" class="content-block" style="background: url(./images/bk1.jpg)">
  <div class="container">
    <div class="row">
      <div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, nam error praesentium dolorum quae provident nulla expedita? Libero, quia, perferendis, illo asperiores blanditiis impedit nemo consectetur commodi architecto cumque cupiditate.</div>
      <div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, officia, quasi, minus, quas odio explicabo similique blanditiis odit unde dolores assumenda aut sint incidunt eaque maiores recusandae eum quod voluptate.</div>
    </div>
  </div>
</section>

Answer 1

这应该有效。 JSFiddle

html,body {
  height:100%;
}

.content-block {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(http://placekitten.com/200/300);
  width: 100%;
  height: 100%;
}