html - 使背景图像响应

Question

在我的元素中，我为 div 提供了背景图像，同时屏幕尺寸减小，图像宽度也必须减小。我已经完成如下操作

css 为 div 是:

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

FIDDLE