trying to add background color via javascript to html element

Question

so I have an array, containing titles and covers for movies. I'm trying to display the names in the flexbox, using cover image as background image. I also tried to write it like that: document.div.style.backgroundColor = "url(infoForThatDay[each]['cover'])"; but it didn't work either

Here is the snippet of my code:

for(let each in moviesToDisplay) {
    let div = document.createElement("div")
    div.innerText = moviesToDisplay[each]['title'];
    
    //That is where I'm trying to set the background color
    div.style.backgroundColor = "url(moviesToDisplay[each]['cover'])";
    flex.appendChild(div);
}

Thank you in advance <3 have a great day ^_^

Remove the quotes around "url(infoForThatDay[each]['cover'])" so that the expression is evaluated and not used literally as the background color. — Scott Marcus
– Scott Marcus, Commented Jun 22, 2022 at 16:01
This is incorrect @ScottMarcus, you still need url() if it's an image value. — bryce
– bryce, Commented Jun 22, 2022 at 16:06
@bryce Yes, but you don't want quotes around the dynamic portion. — Scott Marcus
– Scott Marcus, Commented Jun 22, 2022 at 16:08

bryce · Accepted Answer · 2022-06-22 16:03:40Z

1

You need to use string interpolation to get the value. You also can't use url values with background-color, you should use background instead:

div.style.background = `url(${moviesToDisplay[each]['cover']})`;

answered Jun 22, 2022 at 16:03

bryce

3,0531 gold badge17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tekla Over a year ago

thanks so much, i figured i needed to use ``-s but i couldn't figure out where <3

chirag goyal · Accepted Answer · 2022-06-22 16:12:25Z

0

div.style.background = `url("${moviesToDisplay[each]['cover']}")`;

To set image as background, either set backgroundImage or background property.

Also, you will need to use string interpolation else it will set the background image to whatever the string is.

Also, url() takes a string, that's why "" are required.

answered Jun 22, 2022 at 16:12

chirag goyal

1431 silver badge8 bronze badges

Collectives™ on Stack Overflow

trying to add background color via javascript to html element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related