Random background image on website

→ Are you a new visitor? Please visit the page guidance for new visitors ←

How do you make random background image on website

I got this idea of article from good friend Craig, the idea itself is really cool, especially if you want to make your website more dynamic for your visitors. However, you should keep in mind that for a website, the background should not take the first attention, it should only play a nice ‘feel’ to the user, but not attract their attention from your website content, so carefully select your background images when using this! Back to the main point though, having a random background image can be done very easily depending on the approach taken.

Random background image using php

The very first method that came in my mind was using server based programming language to randomly select an image on each visit or page refresh. Of course you can also set a specific image if this is needed, but that’s not the purpose of this article.  So straight to the point, my first thought is by making an array with the location to the specific images you wish to use as a background.

This can be easily made using the array() function, see bellow:

Next it would be to somehow randome the array keys, you can use the array_rand() function, but I will use in this example the shuffle() function.

Then you just need to use the random array key (I’ll use the first key from the array in my example) for setting the css background for your body page. See bellow example, this will need to be set in the head section of your website!

That’s about it, a proper example you have bellow that includes the full code:

Random background image using javascript

The first method relies on php, this is ok, nothing wrong and I don’t believe it will cause any issues on servers either, but what if you use it on some pages where the pages are cached? Sadly the above method may not work since it will cache the page with that background url that was made when the cached page was created. In such cases, it is best to rely on javascript for changing the value of css elements, javascript code will always be the same on all cached pages and interpreted only by the client browser.

An example similar to the one in php would be bellow, first creating the array in javascript using jQuery:

Then making a random selection from the array:

And finally changing the background image of the body element:

The full code can be found bellow, this again is recommended to be set inside the header part of your website:

Using this example you will be sure that even if pages are cached, the browser will know that it needs to execute the random background image script.

Another example to see it live can be found here, but I’ve used color based background, you can see here:


And that’s all, hope you liked it, share it and comment, until next time!

  • Michael Carbol

    Hi, i don´t know much about javascript. Could you tell me how/where to add “no-repeat” for not repeating the image on the site?

    • Just add another line after the first css line:

      $('body').css('background-repeat', 'no-repeat');

      • Michael Carbol

        that´s it! thanks

  • Martin

    Hi, so useful for me. Im begginer, please could you help me how I can get the bg picture on the center of the page: something like this html code:
    background: url(images/bg-02.jpg) no-repeat center center fixed;
    background-size: cover;
    Thanks. Have a nice day!

    • You should use for background option value there its own css directive. For example, the above article is only for background-image, for background-position, background-size, etc. you can easily set it in your normal css file.

      You don’t need to set everything in the javascript code, you only need background-image in there for random background.

      • Martin

        I have already found solution. Thx!

Request an article ←