I’m currently using this fiddle to try to identify the right properties to check to maintain a full height background image – not using fixed positioning:
I ran across an issue and I’m not sure how to reliably solve it. If you resize the image tag to be 100% height, if the browser is wider than the ratio of the image’s width to its height, then there will be a gap on the right hand side of the image when the height is small.
If you set the height to 100%, it resizes to 100% of the visible space, but if you scroll down, the image doesn’t occupy the entire area vertically.
$(window).resize(function(){
// window and body are both incorrect for different reasons
bgImage.css({height:$(this).height()+'px'});
});
How can you make the image always occupy 100% of the available space:
a) If the page is longer than the image, stretch vertically with auto width
b) If the page is shorter, but the browser viewport is larger, stretch to fit the viewport, past the bottom of the content, but don’t cause a scrollbar to appear if you reduce the browser height to just enough to show the content, a smaller height than the resized image’s new height.
I’m not able to put my finger on the correct heights to use to avoid creating scrollbars when you reduce the height and to avoid leaving gaps when you increase the height and width of the browser.
As a note: Safari for PC has issues with using document.ready and I’ve found using window.load works better when working on image resizing upon page load. document.ready works fine on firefox.
Ok, yes, with imgLiquid and css position fixed:
Try in jsFiddle: http://goo.gl/CWCg8