Bootstrap全高背景封面圖片

我目前正在設計一個使用Bootstrap的網站，並試圖在本網站上添加一個完整高度的背景封面圖片：http://lewisking.net/。Bootstrap全高背景封面圖片

這是我的代碼：

HTML

<header class="title"> 

<div class="cut"> 
<img src="" height=""> 
</div> 


<h2>Vintage Boutique Based in New York</h2> 

<nav> 
<ul> 
<li><a href="#portfolio">SHOP</a></li> 
<li><a href="#about">ABOUT</a></li> 
<li><a href="#contact">PRESS</a></li> 
</ul> 
</nav> 


</header>

CSS

header { 

    background: url(../img/nycfull.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.cut img { 
max-width: 100%; 
height: auto; 
max-height: 100%; 
}

但是，我不能見得到的圖像覆蓋整個「倍以上」節。圖像的高度與標題中的文字一樣高。任何想法我做錯了什麼？

來源

2014-01-08 Adda

你的意思是這樣的demo？

如果是的話試試這個代碼：

CSS代碼

.cover{ 
    color: rgb(255, 255, 255); 
    position: relative; 
    min-height: 350px; 
    background: url("http://lewisking.net/images/header-image.jpg") no-repeat scroll 0px 100%/cover transparent; 
} 

nav ul li { 
    list-style:none; 
    float:left; 
    margin-right:50px; 

}

HTML代碼：

<div class="cover"> 
    <div class="clearfix"></div> 
    <nav> 
    <ul> 
    <li><a href="#portfolio">SHOP</a></li> 
    <li><a href="#about">ABOUT</a></li> 
    <li><a href="#contact">PRESS</a></li> 
    </ul> 

    </nav> 

</div>

來源

2014-01-08 21:21:48 Fox

是，該演示也正是我的意思。謝謝！ – Adda

@Adda：歡迎，並接受答案:) – Fox

您的示例圖片不再有效 –

你的資產淨值和標題不應該在一起！使用您的標題顯示您的網站的初始部分（當人們登錄您的網頁時看到的內容）。將位置添加到您的導航，以便在您想要的位置修復它。

一個全高的封面圖片的CSS代碼：

header { 
background-image: url(background-img.jpg); 
background-repeat: no-repeat; 
background-attachment: scroll; 
background-position: bottom; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
-o-background-size: cover; 
min-height: /*enter value here*/; 
}

在你的HTML，你應該編寫你的<nav> navbar html here </nav>第一，然後你<header> header html here </header>。

如果您編碼您的網站是移動就緒，請閱讀本教程以實現工作封面圖像修復：CSS background-size: cover – Making it work for mobile/iOS

來源

2016-04-18 20:31:18 BrainHappy

Bootstrap全高背景封面圖片

回答

相關問題