[英]Setting full width background image for the header in Bootstrap
我的問題是如何在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;
}
最后，我期待這樣的結果（如果我采取整頁屏幕截圖），
無需使用額外的圖像標簽。 只需設置背景和屬性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>
你在#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
簡單地使用，使用contain保持您的bg-img可擴展和響應 -
background-size:contain;
或者如果想要有一個固定的標題高度，並且不想保持圖像背景按比例縮放到標題的寬度 -
background-size:100% 100%;
嗨試試這個代碼，這就是你要找的。
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>
通過css而不是<img>標簽將您的圖像放在DIV的背景中。
並將DIV放在CSS下面。
.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;
}
使用Bootstrap設置響應式背景圖片以覆蓋表格的寬度
[英]Setting a responsive background image using Bootstrap to cover the width of a table
帶有過濾器的背景圖像未拉伸到畫布的全寬 - fabric.js
[英]Background image with filters not stretching to full width of canvas - fabric.js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.