5

I'm providing a theme setting to define a group of images for the frontpage background. On page load, I want to pick an image at random from this pool.

My approach is to add a line of inline CSS styling the html element with the given image url like this:

<style>
  html { 
    background: url(images/random_image_3.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
</style>

Is there a preferred way of doing this ? Should i use a localize_style function I haven't found out about, or just echo the css out using the right hook?

And what's the best hook for this, only targeting the front facing site?

Improve this question

1 Answer 1

Reset to default
2

You could use the wp_head hook and inject your <style> tag directly into the <head>. Note: make sure you're firing the wp_head() function in your template (which you should be doing already).

add_action('wp_head', 'random_background_image_wpse_83275');
function random_background_image_wpse_83275() {
    $images = array(
        '/path/to/image1.jpg',
        '/path/to/image2.jpg',
        '/path/to/image3.jpg',
        '/path/to/image4.jpg',
    );

    $image = $images[rand(0, count($images)-1)];

    echo '
        <style>
            html { 
                background: url("' . $image . '") no-repeat center center fixed; 
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }
        </style>';        
} // END function random_background_image_wpse_83275

Edit

Another option is to dynamically generate the stylesheet, and randomly choose $image in that file. Then you'd inject your stylesheet <link ...> via wp_enqueue_scripts hook (yes, wp_enqueue_scripts), and enqueue with wp_enqueue_style.

Improve this answer
4
  • 1
    The only property that should be placed in the header is background-image. Everything else belongs to the static stylesheet.
    – fuxia ♦
    Commented Jan 27, 2013 at 5:12
  • @toscho, I was thinking along those same lines, but figured if Author decides to go a different route later on, it's a simple matter of deleting the function or commenting out the add_action, instead of editing both the functions.php and the relevant stylesheet. I'll leave it up to the Author to decide which way to go.
    – akTed
    Commented Jan 27, 2013 at 5:17
  • 1
    -1 to CSS generated by scripts, you just have no way to cache them, maybe better to randomly include different CSS files
    – Mark Kaplun
    Commented Jan 27, 2013 at 5:57
  • I see the caching problem, but adding a random css file, has the same problem, as the linkt to the file would be cached.. I guess a little jQuery that sets the css properties is the best way. then it can be randomized clientside, and a cashed page will not look the same each time it's loaded.
    – mikkelbreum
    Commented Jan 27, 2013 at 19:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.