響應式背景圖像引導程序3

我使用引導程序，並試圖使我的背景圖像響應，但它只是不工作！這裏是我的代碼...響應式背景圖像引導程序3

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

請幫幫我！謝謝！

來源

2014-05-21 user3541921

您可以創建的jsfiddle請 –

也，一個很明顯的錯誤是不是一個背景，讓你在.bg有CSS不會有所作爲，除非你聲明在css中的背景圖像 –

謝謝......我之前沒有創建過jsfiddle，現在我會看看，我對編碼非常陌生，所以對我一無所知！ – user3541921

由於您沒有提到您的「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>

http://jsfiddle.net/AziziMusa/8L9Ty/5/

來源

2014-05-21 14:35:46

謝謝..是的，我希望圖像適合作爲整個背景......我嘗試了你所說的，它使圖像合適，但沒有沒有反應！如果沒有使用div的情況下還有另一種更簡單的方法（這只是我想到的第一件事），那麼這將是很好的.. – user3541921

你需要閱讀更多的一些有關背景圖像和在線圖像之間的差異。您不能將img標籤設置爲背景，它是塊級元素，並隨文檔一起流動。背景圖像是元素的屬性。既然你希望這個圖像成爲整個頁面的背景，你可以將背景圖像應用到html或body元素。

http://jsfiddle.net/8L9Ty/3/

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

來源

2014-05-28 16:04:14 fontophilic

這項工作很好，響應 – Faisal

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

來源

2014-11-27 11:36:13

我牛逼從這麼久開始，最後我發現在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; 
}

來源

2015-07-08 16:19:42

響應式背景圖像引導程序3

回答

相關問題