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

https://jsfiddle.net/fy2zh4vm/1/

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

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

python - pip wont install .WHL files -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -