Load a Random Background Image on Page Load in Jekyll
Tags: jekyll3, backstretch, javascript, jekyll
Published: 2018-01-11 19:30:59

---
title: "Load a Random Background Image on Page Load in Jekyll"
published: true
tags: jekyll 3,backstretch,javascript,Jekyll
canonical_url: 
---

In one of my Jekyll projects I wanted to load a random background image every time the page loaded. [Backstretch](http://srobbin.com/jquery-plugins/backstretch/) is a nice jQuery plug-in to display a large background image “jumbotron” style. So I got it to work by combining Backstretch with a little bit of JavaScript and Jekyll Liquid. I’ll show you how.

### Backstretch

On your Jekyll layout, load the Backstretch plug-in.

```
...
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
</body>
```

### Javascript

Add this to your Jekyll layout after the script tag that loads the Backstretch plug-in. This will select a random image and display it. Like so:

```
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
    <script>
        // Image pool to select from
        var images = [
            'image1.jpg', 'image2.jpg', 'image3.jpg'
        ];

        // Pick a random image
        var maxImages = images.length;
        var rand = Math.floor(Math.random() * maxImages);
        var image = images[rand];

         // Set image as background
        $(".jumbotron").backstretch(
            '/assets/img/' + image,
            {
                centeredY: false
            }
        );
    </script>
</body>
```

 Note: Be sure to replace the image file names and path with your own.

### HTML

Use the Bootstrap jumbotron class to display the background image on your page or post and you’re done!

```
<div class="jumbotron">
  <div class="container text-center">
          <h1>Hello World!</h1>
  </div>
</div>
```

## More Flexibility

If you want to have the flexibility to override the random image with a specific one determined on a page by page basis, you can just add a few modifications:

### Front Matter

In your page’s front matter, add a variable with the image name, like so:

```
---
layout: your_layout
...
image: your_image_file_name
---
```

### Head

On your layout, add a meta tag so we can pass the image file name from Jekyll to JavaScript.

```
<head>
    ...
    {% if page.image %}
        <meta name="backg-image" content="cliff.jpg">
    {% endif %}
</head>
```

### Javascript

Add a Liquid condition to run the appropriate JavaScript code:

```
{%if page.image %}
    <script>
        // Use image file provided by the page
        var image = $('meta[name="backg-image"]').attr('content');
    </script>
{% else %}
    <script>
        // Image pool to select from
        var images = [
            'image1.jpg', 'image2.jpg', 'image3.jpg'
        ];

        // Pick a random image
        var maxImages = images.length;
        var rand = Math.floor(Math.random() * maxImages);
        var image = images[rand];
    </script>
{% endif %}

<script>
     // Set image as background
    $(".jumbotron").backstretch(
        '/assets/img/' + image,
        {
            centeredY: false
        }
    );
</script>
```

That’s it. Load and reload your page and you should see the image changing randomly.

Happy coding!