Home › Forums › CSS › Responsive background image problem › Reply To: Responsive background image problem
mhodges44Well, the reason the background is disappearing is because it no longer has any height, because whatever browser you are using is not respecting the viewport units (vw, vh, vmin, vmax). I know for sure that it is supported in IE10+ and Chrome, but according to caniuse.com it’s supported almost everywhere.
(http://caniuse.com/#search=viewport)
You really have 2 options at this point.
1. Use jQuery to calculate and set .background height
$(“.background”).height($(window).height() – 143);
$(window).resize(function () {
$(“.background”).height($(this).height() – 143);
});
2. Use a static % and deal with potential minor overlaps on certain screen sizes.
Using the viewport units is doing exactly what the jQuery is doing, but in CSS. However, if the browser isn’t recognizing it, you’ll have to go the javascript route. The overlaps are pretty minor, however, so if that’s something that’s a non-issue, you can resolve it with just a static % height and it will get you close enough. It really depends on what you’re looking for.