How to set a home body class background image to load random images from predetermined directory

3 Views

I am trying to make my wordpress site load a different background image on the homepage every time I refresh the page.

The site is http://americasfinestlighting.com

Read More

I would like to add a function to my functions.php file or add a script to my home.php file.

I am curently loading the home page background image with the following css 

body.home {
    background-image: url("images/home-bg/website-background1.jpg");
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    height: 100%;
    width: 100%;
}

The other images I would like the site to load randomly are in the images/home-bg directory.

Thanks,
William

Post Views: 3

Related posts

Leave a Reply

2 comments 

  1. add_filter('body_class','random_background_images');
function random_background_images($classes) {

    // Generate Random number from 1 to 10.  
    $background_class = 'background_' . rand(1,10);

    $classes[] = $background_class;

    return $classes;
}

    Add the code above to your wordpress themes functions.php file.

    It will add a random body class from background_1 to background_10

    now you can add css for them as you want.

        body.background_1 {
       background-image: url("images/home-bg/website-background1.jpg");
    }
    body.background_2 {
       background-image: url("images/home-bg/website-background2.jpg");
    }
    body.background_3 {
       background-image: url("images/home-bg/website-background3.jpg");
    }

    Just like this. Hope this solves your problem.

  2. You will have to get all the files in the directory like so make sure to exclude . and .. they will be returned by readdir. 

    while (false !== ($filename = readdir("images/home-bg"))) {
    if ($filename != '.' && $filename != '..')    
        $files[] = $filename;
}

    Then get a random key like this from the files array (There is a possibility you get the same in a row) 

    $rand_keys = array_rand($files, 1);

    Then with your key you can get the value from the the files array.

    $files[$rand_keys[0]]

    When you put it all together you get this

    function getRandomImage(){

    while (false !== ($filename = readdir("images/home-bg"))) {
        if ($filename != '.' && $filename != '..')    
            $files[] = $filename;
    }

    $rand_keys = array_rand($files, 1);

    return $files[$rand_keys[0]]
}

    Now where you want to set the actual background image that is up to you. You will have to place echo 'background-image: url("images/home-bg/'.getRandomImage().'")'; some where.