Maximilian Ast Maximilian Ast - 1 year ago 200
Javascript Question

jQuery background image rezize on zoom or window resize

I've got a problem.
I want a background image in a

container with a width of 100% of the window.
I want that it changes when I zoom and it should resize when I resize the window.

Here is my try:

var imageWidth = 1024;
var imageHeight = 600;


$(window).resize(function () {resizeImage()});

function resizeImage() {
var navWidth = jQuery(window).width();
var navHeight = jQuery(window).height();
var navRatio = navWidth / navHeight;
var imageRatio = imageWidth / imageHeight;
if (navRatio > imageRatio) {
var newHeight = (navWidth / imageWidth) * imageHeight;
var newWidth = navWidth;
} else {
var newHeight = navHeight;
var newWidth = (navHeight / imageHeight) * imageWidth;
var newTop = 0 - ((newHeight - navHeight) / 2);
var newLeft = 0 - ((newWidth - navWidth) / 2);
$('#image').css({height: navHeight, width: navWidth});
$('#image img').css({height: newHeight, width: newWidth, top: newTop, left: newLeft});
$('#image').css({visibility:"visible", display:"block"});

img { border:0px; }
html { height:100%; }
body { width: 100%; height: 100% ; text-align:left; font: normal 12px Arial}
div#image {position:fixed; z-index:98; display:block;}
div#image img {overflow:hidden; position:absolute; z-index:99;}

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="test.js"></script>
<div id="image"><img src="" alt="" /></div>

The problem now is, that the image is resized to the wrong size.

Answer Source

do you know that you can achieve this using css(3) in multiple ways?

    html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download