How do I concatenate this CSS background image url correctly?

Question

I have the following CSS for a banner like image (external CSS file):

.banner {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba( 255, 255, 252, 0.8 )), url('banners/imageA.jpg');
}

and I have a function that changes the background image but also uses the parameter for other things.

function bannerchange(element)    {
    document.getElementById('banner').style.backgroundImage = "linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba( 255, 255, 255, 0.8 )), url('banners' + element + .jpg\')";
    document.getElementById('bannertext').innerHTML = element;
    document.getElementById('infotext').src = 'infotexts/' + element + '.txt';

I have no trouble setting the new background image by static url

 document.getElementById('banner').style.backgroundImage = "linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba( 255, 255, 255, 0.8 )), url(banners/element.jpg)";

However any combination of concatenations I tried fail to load the image correctly with the function parameter, e.g.

url('banners/' + element + '.jpg')";

and variations.

What is the correct way to use this? I give up.

Anurag Srivastava · Accepted Answer · 2019-05-20 09:39:18Z

3

Just use double quotes as follows:

document.getElementById('banner').style.backgroundImage = "linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba( 255, 255, 255, 0.8 )), url(banners/" + element + ".jpg)";

answered May 20, 2019 at 9:39

Anurag Srivastava

14.5k4 gold badges39 silver badges47 bronze badges

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

Collectives™ on Stack Overflow

How do I concatenate this CSS background image url correctly?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related