WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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:

  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;

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?

share|improve this question

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(

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

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


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.

share|improve this answer
The only property that should be placed in the header is background-image. Everything else belongs to the static stylesheet. – toscho Jan 27 '13 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 Jan 27 '13 at 5:17
-1 to CSS generated by scripts, you just have no way to cache them, maybe better to randomly include different CSS files – Mark Kaplun Jan 27 '13 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 Jan 27 '13 at 19:56

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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