Full size background image using jquery


This plugin will resize image to the full width and height of the browser window. Every time the browser window resizes, so will the background image.

Code

Jquery := Download latest version of jquery with minified (jquery.min.js).
Css := #sitebg{position:fixed;top:0;left:0;overflow:hidden;height:100%;width:100%;z-index:-1000}

<script type=”text/javascript”>

jQuery.noConflict();
jQuery(document).ready(function($){
$(‘body’).append(‘<img id=”sitebg” src=”image-link” />’);
var siteBg = $(‘#sitebg’);

$(window).resize(function(){
var imgw = siteBg.width();
var imgh = siteBg.height();
var windoww = $(window).width();
var windowh = $(window).height();
var windowwratio = windoww/imgw;
var windowhratio = windowh/imgh;
var widthdiff = windowwratio * imgw;
var heightdiff= windowhratio * imgh;
if(heightdiff > windowh) {
siteBg.css({
width:windoww + ‘px’,
height:heightdiff + ‘px’
});
} else {
siteBg.css({
width:widthdiff     + ‘px’,
height:windowh + ‘px’
});
}
});
});

</script>

Save and include above code and then open page in browser

now your background image is fixed.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s