Why background image is not getting responsive according to screen size?

Question

I have used twitter bootstrap to make a webpage. I have inserted an image in background through CSS as following.

<div class="container-fluid">
    <div class="row-fluid">
        <section id="wrapper">

        </section>
    </div> 
</div>

CSS is as follows:

section#wrapper{ 
    max-width:700px; 
    background-image:url("img/crane.png");
    min-height:525px;
}

When I resize browser size the image is not getting resized according to screen size. I am not getting how to make it responsive. So please can any one help me out to resolve this issue. Thanks in advance.

Answer 1

Try this

section#wrapper{ 
    background:url("img/crane.png") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}