Scaling a div with background image to fit screen size - html

Question

Most of my pages has a full width banner at the top just under the menu. They are created as a div with a background image from an image sprite file to reduce page load time.
My problem is that the div does not resize when the screen gets smaller, it just cuts the div of. What I would like is that the div is always 100% wide and its height scaling to keep the proportions of the background image (1300px × 300px).
Here' the code and a 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/

Answer 1

I have added a code to resize the div proportionally with width. But don't think sprite image background will solve your problem.
here is a fiddle link
https://jsfiddle.net/fy2zh4vm/3/
$(window).on('load resize', function(e){
$('.banner').height(parseFloat((300/1300)*$(window).width()));
});

Answer 2

As I already said in my comment: I suggest you just get rid of the sprite and you can solve your problem with background-size:cover or background-size:contain.
Just in case you can't do that, I found a solution that works with sprites, but you need javascript for that (i used jQuery, but if you prefer plain JS, that should be quite easy to achieve).
The idea is that you read the width of your banner div and adjust its height and background-position values accordingly.
And here's the Fiddle
Hope that helps, but again: This is NOT the best solution, this is only the solution if you absolutely have to use sprites!

Answer 3

You are looking for the background-size property you have to set it to either to cover or contain depends on if you want it to cover the div tag or not.
If you want to read more here is the link

Answer 4

I think it's possible with raw CSS and a little hack. There is a blog post from Nicolas, where he describes how to realize background images with defined proportions.
I made you additionally a fiddle.
The percentage in the pseudo element is built by a little calculation: 100 / ( width / height ).
EDIT: don't know if it works with sprites. But maybe it's nevertheless a help :)