Javascript 在引导中设置标题的全宽背景图像_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 在引导中设置标题的全宽背景图像

javascript jquery html css twitter-bootstrap

Javascript 在引导中设置标题的全宽背景图像,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我的问题是如何在像http://demo.evenfly.com/view?theme=SantaGo（我不期待动画，我期待的是如何制作适合屏幕的背景，就像这样）这就是我到目前为止所做的 HTML: <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content

我的问题是如何在像

http://demo.evenfly.com/view?theme=SantaGo

（我不期待动画，我期待的是如何制作适合屏幕的背景，就像这样）

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

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>

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

最后，我期待着这样的结果（如果我拍摄完整的页面截图）

您好，请尝试此代码，这就是您要查找的内容

正文{
保证金：0；
填充：0；
宽度：100%；
}
#庞杂{
宽度：100%；
}
.bg图像{
位置：相对位置；
背景：url（“http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg）无重复中心/盖；
高度：450px；
背景附件：固定；
}
.bg图像img{
显示：块；
宽度：100%；
保证金：0自动；
}
标题{
宽度：100%；
身高：100%；
高度：计算（100%-1px）；
背景图片：url（'a.jpg'）；
背景尺寸：封面；
}


引导示例
你的内容
在#jumboid
内是否有img
标签
如果没有，您可以使用上的背景图像
轻松修复它
按如下方式编辑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;
}

（分叉）示例：
通过css将图像置于DIV的背景中，而不是
标记中
给CSS下面的那个DIV
。您的\u DV{
背景图片：url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
背景位置：固定；
背景尺寸：封面；
背景重复：无重复；
}
无需使用额外的图像标签。只需设置背景和属性background size:cover

试着这样做：

html，
身体{
宽度：100%；
身高：100%；
}
标题{
宽度：100%；
身高：100%；
背景：url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg)中心不重复；
背景尺寸：封面；
}
简单使用，使用包含
保持您的bg img的可伸缩性和响应性-
背景尺寸：包含
或者，如果想要有一个固定的页眉高度，而不想保持图像背景缩放到页眉的宽度-
背景尺寸：100%100%
像这样的东西？我认为下面的css足以满足您的需求。您不必编写任何其他css。body{margin:0；padding:0；}@Stuart是的，我以前试过，但图像没有响应：/it设置为cover，所以它将始终缩放：）感谢您的回复，但是在您的实现中图像的一半也被删除了