有麻煩的背景圖像覆蓋屏幕

的全寬我想有一個背景圖像填充屏幕（不是高度雖然）的整個寬度喜歡上這些網站：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

有麻煩的背景圖像覆蓋屏幕

回答

相關問題