在 Bootstrap 中为标题设置全宽背景图像答案

【问题标题】：Setting full width background image for the header in Bootstrap在 Bootstrap 中为标题设置全宽背景图像
【发布时间】：2016-04-06 11:21:11
【问题描述】：

我的问题是如何在 Bootstrap 中为标题设置全宽和全高背景图像，如 http://demo.evenfly.com/view?theme=SantaGo（我不期待动画，我期待如何制作适合这样的屏幕的背景）？

这是我到目前为止所做的，

https://codepen.io/anon/pen/reYRBo

HTML：

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="sltac.css">
  </head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
<img src="http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg" class="img-responsive" alt="Cinque Terre" width="100%" height="40%" back> 
</div>
</header>
</body>
</html>

CSS：

body{
    margin:0;
    padding:0;
    width:100%;
}

#jumboid{
    width:100% ;

}

.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
    max-width: 1200px; /* corresponds to max height of 450px */
    margin: 0 auto;

}

header{
     width:100%;
  height:100%;
  height:calc(100% - 1px);
  background-image:url('a.jpg');
  background-size:cover;
}

最后我期待这样的结果（如果我拍摄全页屏幕截图），

expected result

【问题讨论】：

这样的？ bootply.com/108614
我认为以下 css 足以满足您的要求。您不必编写任何其他 css。身体{边距：0；填充：0； }
@Stuart 是的，我之前尝试过，但图像没有响应：/
它设置为覆盖，所以它总是会缩放:)

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

无需使用额外的图像标签。只需设置背景和属性background-size: cover

试试这样：

html,
body {
  width: 100%;
  height: 100%;
}
header {
  width: 100%;
  height: 100%;
  background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg) center center no-repeat;
  background-size: cover;
}

<body>

  <header>

  </header>
</body>

【讨论】：

【解决方案2】：

#jumboid 中是否有 img 标记？

如果您不这样做，您可以在#jumboid 上使用background-image 轻松修复它。

编辑css如下：

#jumboid{
    width:100% ;
    height: 100vh;
    background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

（分叉）示例：https://codepen.io/pimskie/pen/wGPOar

【讨论】：

【解决方案3】：

简单地使用，使用contain 保持你的 bg-img 可扩展和响应 -

background-size:contain;

或者如果想要有一个固定的标题高度并且不想让图像背景放大到标题的宽度-

background-size:100% 100%;

【讨论】：

【解决方案4】：

您好，试试这个代码，这就是您要找的。p>

body {
  margin: 0;
  padding: 0;
  width: 100%;
}
#jumboid {
  width: 100%;
}
.bg-image {
  position: relative;
  background: url("http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg") no-repeat center center /cover;
  height: 450px;
  background-attachment: fixed;
}
.bg-image img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
header {
  width: 100%;
  height: 100%;
  height: calc(100% - 1px);
  background-image: url('a.jpg');
  background-size: cover;
}

<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="sltac.css">
</head>

<body>
  <header>
    <div class="row">
      <div class="bg-image" id="jumboid">
      </div>

    </div>
  </header>
  <div class="restofthecontent">
    <p>your content</p>
  </div>





</body>

</html>

【讨论】：

感谢您的回复，但在您的实施中也删除了一半的图像

【解决方案5】：

通过css而不是<img>标签将你的图片放在DIV的背景中。

并在 CSS 下方给出该 DIV。

.Your_DV {
 background-image: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
background-position: fixed;
background-size: cover;
background-repeat: no-repeat;
}

【讨论】：