How to fix a Random Image Generator?

Question

I seem to be writing a line of code wrong, how can I get this code to display in the section class of .background-image

$(document).ready(function () {
    "use strict";

    var images = [],
    index = 0;
    images[0] = "<img src= 'gfx/develop-design-header-image-1.jpg' alt='Visit Computer Hope'>";
    images[1] = "<img src= 'gfx/develop-design-header-image-2.jpg' alt='Visit Computer Hope'>";
    images[2] = "<img src= 'gfx/develop-design-header-image-3.jpg' alt='Visit Computer Hope'>";
    images[3] = "<img src= 'gfx/develop-design-header-image-4.jpg' alt='Visit Computer Hope'>";
    images[4] = "<img src= 'gfx/develop-design-header-image-5.jpg' alt='Visit Computer Hope'>";
    images[5] = "<img src= 'gfx/develop-design-header-image-6.jpg' alt='Visit Computer Hope'>";
    index = Math.floor(Math.random() * images.length);
    // document.write(images[index]);

    document.getElementsByClassName(".background-image") [0].style.backgroundImage = `url('${images[index]}')`;  

});

Seems like your images shouldn't be full tags but just the source if you're just using them in css: `const images[0] = "gfx/develop-design-header-image-1.jpg";` — Nick, Jul 04 '21 at 18:43
Thanks my code above works if I comment out this line document.getElementsByClassName(".background-image") [0].style.backgroundImage = `url('${images[index]}')`; and add in this line // document.write(images[index]); — Bec Westcott, Jul 04 '21 at 18:47
Correct! There's a big difference between writing an `img` tag to the DOM and setting the background property in CSS! See my answer below for a working example. — Nick, Jul 04 '21 at 18:53

AlexSp3 · Answer 1 · 2021-07-04T18:58:11.503

0

The background-image class only works when you put the url directly. In your code you are creating an img tag

This should work

$(document).ready(function () {
  "use strict";

  var images = [],
  index = 0;
  images[0] = "gfx/develop-design-header-image-1.jpg";
  images[1] = "gfx/develop-design-header-image-2.jpg";
  images[2] = "gfx/develop-design-header-image-3.jpg";
  images[3] = "gfx/develop-design-header-image-4.jpg";
  images[4] = "gfx/develop-design-header-image-5.jpg";
  images[5] = "gfx/develop-design-header-image-6.jpg";
  index = Math.floor(Math.random() * images.length);
  // document.write(images[index]);

  document.getElementsByClassName(".background-image") [0].style.backgroundImage = `url('${images[index]}')`;});

edited Jul 04 '21 at 18:58

answered Jul 04 '21 at 18:48

AlexSp3

2,201
2
7
24

This worked thank you, can I still add an alt tag? – Bec Westcott Jul 04 '21 at 18:52
Here there is an answer, you can use the title attribute https://stackoverflow.com/questions/4216035/css-background-image-alt-attribute/17126523 – AlexSp3 Jul 04 '21 at 18:56

score 0 · Answer 2 · answered Jul 04 '21 at 18:52

Here is some working code with a couple things fixed:

Your images should just reference the URL and not create HTML img elements
Your getElementsByClassName selector should not have a . in it

const images = [
  "https://via.placeholder.com/150/0000FF",
  "https://via.placeholder.com/150/00FFFF",
  "https://via.placeholder.com/150/000000"
];
const index = Math.floor(Math.random() * images.length);
document.getElementsByClassName("background-image") [0].style.backgroundImage = `url('${images[index]}')`;

.background-image {
  height: 300px;
  width: 300px;
}

<div class="background-image"></div>

Note that you lose the ability to add alt text in this case! If your images are meaningful enough to convey information, they probably should not be background images.

If you absolutely need them to be background images, you can sat the role attribute on the div to "img" and give it an aria-label. This will likely obscure any content inside that div from screen readers, so make sure you really want to go this way rather than using an img tag.

How to fix a Random Image Generator?

2 Answers2