Background-image style attribute in JavaScript

Question

I'm trying to apply a background image using a style tag on a div that's reference in JavaScript. I'm sure it's something to do with the quotations around the image variables. Any help would be greatly appreciated.

function appendData () {
 var image = "http://domain.com/image.jpg";
 var html = '<div class="itemImage" style="background-image:url(' + image +    ');"></div>';
 $('.container').append(html);
}

you should tag jQuery as well, since you are using it in your last line :) — briosheje
– briosheje, Commented Jul 8, 2016 at 14:43
What is the CSS for itemImage? I am interested to know the height and width of the div. Also try surrounding the url with double quotes: url("' + image + '") — Freddie Coleman
– Freddie Coleman, Commented Jul 8, 2016 at 14:44
Have you checked if the image is larger than the div you have put it inside? It could be rendered but due to size you might only be seeing a small portion of the empty space around it. codepen shows that it should work as is assuming no cors or background-size issues — kriddy800
– kriddy800, Commented Jul 8, 2016 at 14:53

John Rusch · Accepted Answer · 2016-07-08 14:50:56Z

2

I would consider changing your approach slightly. Sure, you can append the html to your container OR you could change the property of the itemImage without re-writing it every time.

If you build the itemImage div into that container you could do this instead

function appendData () {
  var image = "http://domain.com/image.jpg";
  $(".itemImage").css("background-image", image);
}

answered Jul 8, 2016 at 14:50

John Rusch

217 bronze badges

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

2 Comments

MegaTron Over a year ago

I never thought of that, that's some good advice. Thanks John :)

John Rusch Over a year ago

No prob! I try to avoid inserting HTML whenever possible.

marcozipsp · Accepted Answer · 2016-07-08 14:47:54Z

1

function appendData () {
 var image = "http://domain.com/image.jpg";
 var html = '<div class="itemImage" style="background-image:url(\'' + image +    '\');"></div>';
 $('.container').append(html);
}

answered Jul 8, 2016 at 14:47

marcozipsp

414 bronze badges

1 Comment

MegaTron Over a year ago

Marco - Perfect. Thank you! - I can accept the answer in 6 minutes :)

Collectives™ on Stack Overflow

Background-image style attribute in JavaScript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related