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

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -