CSS Random Background Image on Refresh

A random background image can be used for various purposes on a webpage in different ways. Sometimes it is used as a slideshow and sometimes one image is displayed at a time and a new image appears when the page is reloaded. You can see this feature on Bing’s homepage. In this tutorial, we will create a random background image functionality on page refresh using jQuery and CSS.

A random background image feature provides a new look each time when users refresh the page. It can be used on a photography portfolio, on an entertainment website, or on presentation webpages. Besides this, you can also use it anywhere on a website as a showcase of your work.

The idea to achieve this functionality is that we will use JavaScript random function to randomly select an image URL from the array and set it as a background. The use of the JS function allows us to have as many images as we want. You just need to place links of image URLs in the array and then randomly images will start showing. Well! let’s start with coding, but before this, browse the demo page to see how different background image appears on page refresh.

The HTML Code

In order to create a random background image functionality, add a class name "random_bg" to the body element. If you want to set this functionality to a specific container, then add this class name to that element.

<body class="random_bg">

<!-- Your Content Goes Here -->

</body>

The Basic CSS Styles

Basically, the CSS styles for random background images are optional. We’ll set a random background image using the JavaScript Math Random function. Anyhow, the following are the basic CSS background properties to turn off the default background repetition and set its size to cover.

body{
    background-repeat: no-repeat;
    background-size: cover;
}

You can also define additional CSS styles in order to customize the background of your webpage.

Functionalize Random Background Image on Refresh

In order to set a random background image each time when the user refreshes the page, we will store the image URL in an array and set the background style using the jQuery CSS function. So, load the jQuery JavaScript library by adding the following CDN link into the head tag of your HTML page.

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>

Now, create a pic() function and define a bgm array and place your image links inside that array. Select the "body" element, use the jQuery CSS function to set a background image for it. Here you need to use Math.random() function for the image URL that will randomly select an image from the array.

function pic() {
    var bgm = ['http://i.imgur.com/Z0qJG.png','http://i.imgur.com/AOkCD.png', 'https://static.planetminecraft.com/files/resource_media/screenshot/1143/2011-10-30_131700_732517.jpg'];

    $('body').css({
        'background' : 'url('+ bgm[Math.floor(Math.random() * bgm.length)] + ') no-repeat',
    });
}
pic();

In the above JavaScript, you just need to update bgm variable. Place the URL of your background images inside bgm array. You can place as many URLs separated by comma as you want.

    var bgm = ['IMAGE URL HERE','SECOND IMAGE', 'AND SO ON'];

That’s all! hopefully, you have successfully integrated this CSS random background image on refresh functionality into your project. If you have any questions or suggestions let me know by comment below.

You Might Be Interested In:

Muhammad Asif is a Front End Developer and Editor Staff at Codeconvey.com. He enjoys experimenting with new CSS features and helping others learn about them.

2 thoughts on “CSS Random Background Image on Refresh”

  1. This is amazing,

    If you want to take this a step further and have 2 different sizes of the background based on the display size how would you do that?!

    so one background for desktop (using your current code) but another for when on mobile device for example @media only screen and (max-width: 480px)
    display the smaller version of the backgrounds (randomly)

    • Hi Zach!
      We can achieve this by getting the screen width, then we’ll use a conditional statement to set a random background. Add the following JavaScript function to do so:

      $(document).ready(function(){
      var devWidth = $(window).width(); //get the device width
      
      //apply a different background on mobile
      if (devWidth <= 480){
          var bgm = ['http://i.imgur.com/Z0qJG.png','http://i.imgur.com/AOkCD.png', 'https://static.planetminecraft.com/files/resource_media/screenshot/1143/2011-10-30_131700_732517.jpg'];
       
          $('body').css({
              'background' : 'url('+ bgm[Math.floor(Math.random() * bgm.length)] + ') no-repeat',
          });
      } else { //set background for desktop
      
          var bgm = ['add you image url','another url'];
       
          $('body').css({
              'background' : 'url('+ bgm[Math.floor(Math.random() * bgm.length)] + ') no-repeat',
          });
      }
      
      });
      

      In the above code, you just need to update bgm array values with the URL of your images. I combined the function, so you don't need to add the JS code that has been described in the tutorial.

Comments are closed.