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全高背景封面图片

回答

相关问题