I am attempting to set a background image that fills the entire window regardless of its size.
I have implemented html, css and script as shown below:
// Function adaptImage()
// Parameters: targetimg
function adaptImage(targetimg) {
var wheight = $(window).height();
var wwidth = $(window).width();
targetimg.removeAttr("width")
.removeAttr("height")
.css({ width: "", height: "" });
var imgwidth = targetimg.width();
var imgheight = targetimg.height();
var destwidth = wwidth;
var destheight = wheight;
if(imgheight < wheight) {
destwidth = (imgwidth * wheight)/imgheight;
$('#fundo img').height(destheight);
$('#fundo img').width(destwidth);
}
destheight = $('#fundo img').height();
var posy = (destheight/2 - wheight/2);
var posx = (destwidth/2 - wwidth/2);
if(posy > 0) {
posy *= -1;
}
if(posx > 0) {
posx *= -1;
}
$('#fundo').css({'top': posy + 'px', 'left': posx + 'px'});
}
$(window).resize(function() {
adaptImage($('#fundo img'));
});
$(window).load(function() {
$(window).resize();
});#fundo-externo {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}
#fundo {
position: fixed;
width: 100%;
height: 100%;
}
#fundo img {
width: 100%;
position: absolute;
}
#site {
position: absolute;
top: 40px;
left: 50%;
width: 560px;
padding: 20px;
margin-left: -300px;
background: #FFF;
background: rgba(255,255,255,0.8);
}<body>
<div id="fundo-externo">
<div id="fundo">
<img src="http://placehold.it/1920x1080" alt="" />
</div>
</div>
</body>However, on some devices, the background does not completely fill the screen, leaving a white space at the bottom.
We would appreciate any suggestions or ideas. Thank you!