I'm trying to incorporate an image into a div (#bg) using jQuery in order to create a webpage that automatically resizes. However, I've encountered some issues with the auto-resizing functionality. When I manually add the image to the div, everything works perfectly fine. I'm still relatively new to jQuery, so any detailed explanations would be greatly appreciated. Thank you in advance.
HTML
<div id="bg">
</div>CSS
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }jQuery
$(window).load(function() {
$('#bg').prepend('<img src="Background.jpg" id="bg" alt="" />')
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});