CODEWITHSUNDEEP
javascriptcssasp.net-coreweb-frontend
Nick Fleetwood
Nick Fleetwood

Reputation: 531

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>

Upvotes: 0

Views: 1315

Answers (1)

NetSkylz
NetSkylz

Reputation: 414

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";

Upvotes: 1

Related Questions