jquery - Making background image responsive in CSS -
i trying create responsive website scratch without using frameworks bootstrap. had banner in website had set background image follows
<body> <div id="pagewrap"> <div class="test"> <div class="headers"> <div class="logo"> <a href="#"><img src="images/logo.png" alt="site logo"/></a> </div><!--logo--> <div class="nav"></div><!--nav--> <div class="slider_content"></div><!--slider_content--> </div><!--header--> </div> </div><!--pagewrap--> </body>
.headers { background-image:url(images/banner.png); background-repeat:no-repeat; background-size:cover; background-position:center; width:100%; }
when apply height div
headers image gets displayed taking same height in mobile devices doesn't good. how make responsive background image scales according device resolution.
might you, demo
$( window ).resize(function() { var imgheight = $( window ).height(), imgwidth = $( window ).width(); $('.headers').css({ height: imgheight, width: imgwidth }); });
Comments
Post a Comment