使背景圖像具有響應性

Question

在我的項目中，我給div設置了背景圖像，同時屏幕尺寸減小了，圖像寬度也必須減小了。

div的CSS為：

.home_content{
    margin: 30px auto 20px;
    height: auto;
    width:920px;
    padding:15px 0px 70px 0px;
    background: url(images/bottom_bg.png)  no-repeat bottom center #fff;
    border:10px solid #bababa;
}

現在我為響應性再寫了一個css，即

@media only screen and (max-width: 760px) {    
    .home_content{
        position: relative;
        width: 100%;
    }
} 

但問題是給div的背景圖像保持不變。請幫助我糾正此問題。

Answer 1

對於background，您可以嘗試使用background-size：

@media only screen and (max-width: 760px) {    
    .home_content{
        position: relative;
        width: 100%;
        background-size:100px 100px; /* or %, or cover/contains/auto */
    }
}

參見： http : //www.w3.org/TR/2002/WD-css3-background-20020802/#background-size

Answer 2

這應該可以正常工作，包括IE9

@media only screen and (max-width: 760px) {    
    .home_content {
        position: relative;
        width: 100%; 
        -webkit-background-size: cover; /* For WebKit */
        -o-background-size: cover;      /* Opera */
        -moz-background-size: cover;    /* Mozilla */
        background-size: cover;         /* Generic */
    }
} 

Answer 3

您實際上並不需要媒體查詢。 您可以使用background-size和background-image 。 當然，您必須修改此設置以適合您的需求。 我把width: 80%; 演示要應用的寬度。 您可以將其更改為100％或任何需要。

#container{
    width: 500px;
    height: 500px;
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/87/Ducati_999_2005.jpg');
    background-repeat: no-repeat;
    border: 1px solid #000;

    background-size: 80%;
}

小提琴