Search code examples
javascriptcssasp.net-coreweb-frontend

Random Background Images

I wanted to have a random background image each time a page loads, from a list of 5 images.

I was trying to follow this questions,

Random background images CSS3

but it never gets officially answered, and I can't quite make it work. It feels like it should work though, and I might be missing something simple.

I want to put this in the _Layout page, so it applies to each page. It's kind of TMI, but I'm in VS2019, asp core mvc in c#.

This is what I got:

<head>
<style>...</style>
<script type="text/javascript">
        var totalCount = 8;
        function ChangeIt() {
            var num = Math.ceil(Math.random() * totalCount);
            document.body.background = 'assets/bgImages/' + num + '.jpg';
            document.body.style.backgroundRepeat = "repeat";    // Background repeat
        }
    </script>
</head>
<body>...</body>

</html>
<script type="text/javascript">
    ChangeIt();
</script>
Solution

  • When you access the background property on the body, you're missing the ".style" part and you need to use "url('...')" to set images as background. You can even set image and repeat at the same time.

    Here's an example: https://jsfiddle.net/pg1u0rn6/

    const randomId = 10836835;
const pexelId = '60597/dahlia-red-blossom-bloom-60597';

document.body.style.background = "url('https://wallpaper.dog/large/" + randomId + ".jpg') repeat";
document.querySelector('.inner').style.background = "url('https://images.pexels.com/photos/" + pexelId + ".jpeg')";
    body {
  background: red;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 300px;
  height: 300px;
  background-size: cover !important;
}
    <div class="inner"></div>

    In you case:

    document.body.style.background = "url('assets/bgImages/" + num + ".jpg') repeat";