I'm using the background-size: cover; in CSS and whilst it works well, I have noticed that once it "kicks in" then you may have issues with the whole height of the background image not displaying.
For example, I have code something like this:
#home .top {
min-height: 768px;
background: #fff url('../images/home-bg-lg.jpg') center top no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Now, the min-height: 768px; refers to the actual height of the image, so I set that to make sure it always shows the full height regardless of the content; however obviously once the background size starts to increase the height increases too and hence the 768px size is no longer large enough and a lot of the background is not shown.
Is there anyway to fix this with CSS, if not, how about with JavaScript, preferably jQuery?
If only a JavaScript/jQuery solution it may be worth mentioning that I use breakpoints and utilise smaller background images at smaller resolutions; nothing needs to be applied to these.
Edit: To clarify, I was wondering if it was possible so that when it expands it always shows the full height of the image. So for example if it was using an image that was 1600 x 768 and someone viewed it on 1920 x 900 resolution than it would expand to 1920px width and hence it would be good if the min-height could change to 922px as that would be the correct height of it now?
I assumed you have background's original dimensions, if not here's how you can get it
var bgw = 1600;
var bgh = 768;
function coverBg() {
var el = $('#home .top');
var elw = el.outerWidth();
var elh = el.outerHeight();
var newHeight = elw*bgh/bgw;
el.css('height', newHeight);
}