使背景图像具有响应性

Question

In my project I have given a background image for a div while the screen size decreases the image width also has to be decrease.I have done to get this as follows

css for the div is :

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

now I have wrote one more css for responsiveness, that is

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

but the problem is the background image given for the div remains the same.please help me to correct this.

Answer 1

For a background , you might try to use background-size:

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

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

Answer 2

This should work most thing including 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

You don't really need media queries for this. You can use background-size and background-image . Of course you'll have to modify this to suit your needs. I've put width: 80%; to demonstrate the width being applied. You can change it to 100% or whatever your need is.

#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