CSS: Full Page (Screen) Background Image Slideshow: Made Easy

Full screen background image that span all over the browser window is getting much more popular now. It definitely catches visitor’s eye and boost the overall design of the website. It looks much more colourful and attractive. Few examples of some awesome looking websites are TeleTech, Vivo Group, Chicago L-Shirts and Fleming Steele. This snippet is not specific to WordPress except that it require jQuery and use WordPress conventions. Please note that it does not require any jQuery plugin.

TeleTech

TeleTech

Vivo Group

Vivo Group

Snippet

Your contents block must wrap around with a container div and following div should be its sibling. Add following code in your footer.php or header.php within the body tag but out of the content wrapper div.

<div id="full-bg">
    <img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg1.jpg" />
    <img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg2.jpg" />
    <img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg3.jpg" />
    <img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg4.jpg" />
</div>

So, it will look like

<div> your contents here </div>
<div id="full-bg"> ... </div>

Add following CSS to your theme’s style.css file

html, body { 
    height: 100%;
}
#full-bg img { 
    position:fixed; 
    top:0; 
    left:0;
    height:100%; 
    width:100%; 
    z-index:-10;
    opacity: .9;
}

Rotating Background Images

Add folowing code within the head tag (in header.php file).

<script type="text/javascript">
jQuery(document).ready(function($) {
    setInterval(function(){
        $('#full-bg img.active').animate({opacity:0},500, function(){
            $(this).removeClass('active');
        })
        if($('#full-bg img.active').next().length>0)
            $('#full-bg img.active').next().animate({opacity:1},500).addClass('active');
        else
            $('#full-bg img:first').animate({opacity:1},500).addClass('active');

    } ,4000);
    $('#full-bg img:first').animate({opacity:1},400).addClass('active');
});
</script>

Random Images

To make random images display on each refresh, Please add following javascript snippet withing the document.ready function you added a while ago.

/* random ordering of images */
var $fullBGs = $("#full-bg img"),
    $copies = $fullBGs.clone(true);

[].sort.call($copies, function() { return Math.random() - 0.5; });

$copies.each(function(i){
    $fullBGs.eq(i).replaceWith(this);
});

Single Background Image

If you want have only one responsive image in the background, you can ignore all JavaScript code and replace HTML code with the following.

<div id="full-bg">
    <img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg1.jpg" />
</div>

That is, use one image tag only.

8 Responses to CSS: Full Page (Screen) Background Image Slideshow: Made Easy

  1. Full screen background image related to topic is very good idea for particular site. Even I have used this idea for my site and this make site very beautiful and meaningful.

  2. Wim Enters says:

    Hi, thank you for the info.

    I just can’t get the rotating images or random images to work.
    I have added the javascript in the head, the css and the html. It simply shows the last of the images.

    And can you give me the complete javascript for the random images only. I am not sure if it should be placed instead or beneath of the code for rotating images

    Thank you.

    • Wim Enters says:

      The rotating images are working now.
      jquery was called after the rotating script.

      If you please could answer my second question. The full code of the random images.
      I want the random images and not the rotating

  3. Wim Enters says:

    Got it to work.
    just replaced the full code of the rotating images with the random.

    Code od random images

    Sorry for the questions I am not that familiar with javascript

  4. Hi there, first of all thank you for the post. It gave me some hope to somehow make our website a little professional (rlgsolutions.com). If you noticed we’ve done this on iweb and i just wanted to know how to insert this code in my iweb page.

    Thank you in anticipation of your positive response on this regard,

    Best

    Lester

  5. sarkar says:

    thank you very much

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>