无法让背景图像覆盖整个屏幕宽度

Question

我想要一个背景图片来填充屏幕的整个宽度（虽然不是高度），就像在这些网站上一样：http://www.rokivo.com/ 和 https://teemo.gg/

我当前的结构如下所示：

<header class="navbar navbar-default" role="navigation">

  <div class="container">
    Code for header
  </div>

</header>

<div class="container">
  Rest of page contents here
</div>

我是否必须将其他所有内容包装在 div 和 class 容器中并使用它来指定背景图像？还是有其他方法可以做到这一点？

Answer 1

您可以执行以下操作：

HTML:

<header class="navbar navbar-default" role="navigation">

  <div class="header-content">
    Code for header
  </div>

</header>

<div class="container">
  Rest of page contents here
</div>

CSS:

header {
  width: 100%;
  background: url(https://unsplash.it/2000/1000/?blur) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.header-content {
  padding: 5em 0;
  font-size: 2em;
  text-align: center;
}

这是怎么回事？环绕 header 的宽度为 100% 以覆盖整个屏幕宽度，并且还具有背景图像。此外，它设置为 no-repeat 并居中 vertically/horizontally，并且 background-size 设置为覆盖以允许显示尽可能多的图像。

在 .header-content 上，向 div 添加了填充，使其垂直居中。

可以调整填充、文本大小等，但这应该让您大致了解如何实现此效果。

要查看实际效果，请参阅此 codepen。

Answer 2

你可以做一些简单的事情，比如：

<header>
    <nav class="navbar navbar-default" role="navigation">
      <!-- nav stuff -->
    </nav>
  <div class="main-container">
    Code for header
  </div>

</header>

<div class="container">
  Rest of page contents here
</div>

.main-container {
    background: url(htts://someimage.com/1.jpg) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: auto;  // or like the teemo site - height: 500px;
}

这里有一篇关于 CSS-Tricks

的好文章

无法让背景图像覆盖整个屏幕宽度

Having trouble getting a background image to cover full width of screen

css

background-image