Comments on: Full screen, scaled & resizable background images with Javascript https://projectsimply.com/javascript-full-screen-background-images/ We help clients bring their ideas to life by creating digital experiences that people use, share and love. Mon, 03 Feb 2020 21:41:43 +0000 hourly 1 By: oliver https://projectsimply.com/javascript-full-screen-background-images/#comment-8 Mon, 04 Feb 2013 16:11:01 +0000 http://projectsimply.com/?p=621#comment-8 Thanks for great inspiration. I have spend some hours perfecting this. First look out for the > > on line 26 that got screwed in translation, it has to be >.

More importantly is that every browser screws up on stretching it all out. (including this demo). We need to zero the negative marginLeft if wwidth is widest and zero the negative marginTop as wheight is tallest.

if(wwidth/ratio >= wheight)
        {
            $('#background-wrap img').css({ 'width'         : wwidth,
                                            'height'        : Math.ceil(wwidth/ratio),
                                            'marginTop' : Math.ceil((wheight - wwidth/ratio)/2),
                                            'marginLeft'    : 0
                                        });
        }
        else
        {
            $('#background-wrap img').css({ 'height'        : wheight,
                                            'width'         : Math.ceil(wheight*ratio),
                                            'marginLeft'    : Math.ceil((wwidth - wheight*ratio)/2),
                                            'marginTop' : 0
                                        });
        }

cheers and thanks again.

/Oliver Anthony-Sparholt

]]>