Reponsive background image

[Thien_1]

I want to make my background image in reponsive desgin mode.
I want to make the background image will be resize when changing size of browser. Using
"background:cover,background-position:center" it not working. I guess because i set height and width for background image but if i didn't set the image will not scale to screen

Here my code:

<div class="container-fluid">
<div class="col-md-2"></div>//this vertical navigation
<div class="col-md-10">//this is background image
<div class="bg-img" id="bg-img1">
</div>
</div>

Css Code:

.container-fluid{
    width: 100%;
    height: 910px;
}


.bg-img {
    width: 1135px;
    height: 910px;
    margin-left: -15px;
}

#bg-img1{
    background: url("Image/Layer8.png");
    z-index: 10;
}
#bg-img2{
    background: url("Image/Layer6.png");
    z-index: 10;
}
#bg-img3{
    background: url("Image/Layer5.png");
    z-index: 10;
}
#bg-img4{
    background: url("Image/147866678.png");
    z-index: 10;
}
#bg-img5{
    background: url("Image/154371413.png");
    z-index: 10;
}
#bg-img6{
    background: url("Image/154820621.png");
    z-index: 10;
}
#bg-img7{
    background: url("Image/50135942.png");
    z-index: 10;
}
#bg-img8{
    background: url("Image/51727540.png");
    z-index: 10;
}
#bg-img9{
    background: url("Image/52334650.png");
    z-index: 10;
}
#bg-img10{
    background: url("Image/51685684.png");
    z-index: 10;
}

And Script:

$(document).ready(function(){
   $(".submenu li a").click(function(e){
       var bg = $(this).data("bg");
       $(".bg-img").attr("id",bg);
       $(".popup").hide();  //hide all popup
       $(this).parent().find(".popup").show();
       e.preventDefault();  //not allow change location
   });
});

[karand19]

You are using bootstrap and it has responsive class class="img-responsive". Use it and images will be responsive.

[aliceknight]

I will used this code for responsive background image.