html - Scaling a div with background image to fit screen size -
most of pages has full width banner @ top under menu. created div background image image sprite file reduce page load time. problem div not resize when screen gets smaller, cuts div of. div 100% wide , height scaling keep proportions of background image (1300px × 300px).
here' code , jsfiddle:
<div class="entry-content"> <div class="banner"></div> </div> .entry-content { max-width: 1300px; width: 100%; padding: 0 20px 0 20px; } .banner { margin: 0 -20px 0 -20px; max-width: 1300px; height: 300px; background: url("http://renservice.dk/wp-content/uploads/2016/02/banner-sprites.jpg"); background-position: 0 -900px; }
i have added code resize div proportionally width. don't think sprite image background solve problem.
here fiddle link https://jsfiddle.net/fy2zh4vm/3/
$(window).on('load resize', function(e){ $('.banner').height(parsefloat((300/1300)*$(window).width())); });
Comments
Post a Comment