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