JQuery Full Screen Images

  Categorized under: utilities

This script will allow you to use full cover background images on your website. You can use it with z-index to lay it all the way to the back of the content so you can also stack items! You can get really creative with building fullscreen ready content for tablets, mobile devices or full screen websites. I'm using it on a variety of blogs so I'll explain some of the principles below.

head tag:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
jQuery(function() {
var theWindow = jQuery(window),
$bg = jQuery("#bg_img"),
aspectRatio = $bg.width() / $bg.height() ;

function resizeBg() {
if ( (theWindow.width() / theWindow.height() ) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}

theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
</script>

<!--You need to include the code above into the head of your HTML document. This will set the resize feature for the image-->

////////////////////////////////////////////////////////////////////////////////////
style tag:
#bg_img {
background-position: center center;
top: 0;
left: 0;
position: fixed;
z-index: -1;margin:0px;padding:0px;
margin:0px;
}

.bgwidth {
width: 100%;height:auto;}
.bgheight {
height: 100%;width:auto;}

// I've set the z-index but using inline styles you can rewrite this.

////////////////////////////////////////////////////////////////////////////////////

img tag:
use 1:
img src="http://distilleryimage7.instagram.com/0447ed8c47c411e180c9123138016265_7.jpg" id="bg_img" class="bgwidth"
<!-- this is standard use where the image fits to the width-->

use 2:
img src="http://distilleryimage7.instagram.com/0447ed8c47c411e180c9123138016265_7.jpg" id="bg_img" style="height:100%;width:auto;
<!-- here i start to use inline to control the photos, in this case I want the photo to fit to the height of the page, which messes up the width, but whatever-->

use 3:
img src="http://distilleryimage7.instagram.com/0447ed8c47c411e180c9123138016265_7.jpg" id="bg_img" style="height:100%;width:100%;
<!--here i just tell the picture to fit however it can on the screen

use 4:
<div id="bg_img" style="width:50%;height:100%">
<iframe width="100%" height="100%" src="http://www.youtube.com/embed/Gw09tAcNB0Q" frameborder="0" allowfullscreen></iframe>
</div>
<!-- this is where I had some fun, see, you can use the bg_img ID on ANYTHING so I added it to a DIV and then I added a youtube embedded iframe set to 100% so it just fills the screen, but it's being controlled by the DIV with the inline style! If I added z-index I'd have things hovering over or behind but I'll show some examples later.-->

— Zeus ::)
Jan 26, 2012