有麻烦的背景图像覆盖屏幕

的全宽我想有一个背景图像填充屏幕（不是高度虽然）的整个宽度喜欢上这些网站：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和使用它来指定背景图像？或者有另一种方法可以做到这一点？

来源

2016-08-20 PCR

你可以做类似如下：

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; 
}

所以这是怎么回事呢？包裹标题的宽度为100％，以覆盖屏幕的整个宽度并具有背景图像。此外，它被设置为不重复并居中垂直/水平，以及背景大小设置为覆盖，以尽可能多地显示图像。

在.header-content上，将填充添加到div以使其垂直居中。

填充，文本大小等可以调整，但这应该给你一个这种效果如何完成的一般想法。

要在行动中看到它，请参阅此codepen。

来源

2016-08-20 01:58:07

很好看有没有办法让它如此的背景图像不仅涵盖了头，但也有一些内容就像在teemo.gg网页中一样，它包含标题，以及主徽标+搜索栏。或者我只需要将所有内容都包装在一个div中来实现这一目标？ – PCR

的确，您需要将所有内容都包含在标题内的header-content div中。 –

你可以做喜欢的事，很简单：

<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

来源

2016-08-20 02:08:27 Jon

有麻烦的背景图像覆盖屏幕

回答

相关问题