Random Fullscreen Background Image on Browser Refresh

random fullscreen background image on browser refresh

Like this

DEMO

$(document).ready(function(){
    var classCycle=['imageCycle1','imageCycle2'];

    var randomNumber = Math.floor(Math.random() * classCycle.length);
    var classToAdd = classCycle[randomNumber];

    $('body').addClass(classToAdd);

});

Full Screen Background Image(s) + Rotating Images?

Why not just use the new background-size:cover, for the background, and then use jQuery to randomly change this background image as per the normal method?

I've created a jsfiddle for you, basically doing everything you need. (Keep clicking Run in jsfiddle and you'll see the background-image cycle randomly).

Be aware, background-size:cover, mainly works with newer bowers, but by using Modernizr this can be overcome.

Install Modernizr by linking it in your header

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>

And in your HTML tag,

<html class="no-js">

Edit: As per the comments, I've made another way that has more browser support:

jsfiddle

This time I've just made it randomly apply a class, of which this class has vendor-prefixs and fixes for ie-7/ie-8 and all the rest really. It won't look perfect in IE8, but images will fully stretch to fit the height/width of the body.

Random Fullscreen Background Image on Browser Refresh

random fullscreen background image on browser refresh

Full Screen Background Image(s) + Rotating Images?

Related Topics

Leave a reply