響應式背景圖像bootstrap 3
[英]Responsive background images bootstrap 3
問題描述
我正在使用bootstrap，我正在嘗試使我的背景圖像響應，但它只是不工作！ 這是我的代碼......
HTML
<div class="row">
<div class="bg">
<img src="../img/home_bg.jpg" alt="home background image">
</div><!-- /.bg -->
</div><!-- /.row -->
CSS
.bg {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
請幫我！ 謝謝！
5 個解決方案
解決方案1
12 2014-05-28 16:04:14
您需要閱讀更多有關背景圖像和內嵌圖像之間差異的信息。 您不能將img標記設置為背景樣式，它是塊級元素，並隨文檔一起流動。 背景圖像是元素的屬性。 由於您希望此圖像成為整個頁面的背景，因此您可以將背景圖像應用於html或body元素。
body {
background: url('http://placekitten.com/900/900');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
解決方案2
2 2015-07-08 16:19:42
我試了這么久，最后我發現在bootstrap 3.3.5中你必須使用height和width屬性來設置背景。 我使用了以下代碼：
.header{
background-image: url(images/header.png);
height: 500px;
width: 100%;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
解決方案3
1 2014-05-21 14:35:46
由於您未提及“DIV”標簽的背景圖像。 我假設您要為整個頁面應用背景圖像。 這是你要找的？
樣式表
body {
background: url('http://i.stack.imgur.com/jGlzr.png') repeat-x, repeat-y;
}
HTML部分
<body>
<div class="row">
<div class="bg">
</div><!-- /.bg -->
</div><!-- /.row -->
</body>
解決方案4
1 2014-11-27 11:36:13
刪除img標簽<img src="../img/home_bg.jpg" alt="home background image">並使用css執行以下操作：
HTML
<div class="row">
<div class="bg"></div><!-- /.bg -->
</div><!-- /.row -->
CSS
.bg {
background-image: url('../img/home_bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
解決方案5
0 2019-05-29 05:22:58
body, html { height: 100%; margin: 0; } .bg { /* Full height */ height: 100%; /* The image used */ background-image: url("https://picsum.photos/id/1/200/300"); /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; }
<div class="container-fluid bg" > </div>
Bootstrap 3和響應性背景圖片？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.