How can I use the background property using Javascript instead of using <img> tag?

Question

I want to load an image background inside a specific div instead of <img src=""> tag using Javascript.

As it is now the code with the <img/> tag is:

item.prepend($('<img/>', {src: file[options.baseUrlAttribute] + '' +file[options.pathAttribute]}));

I tried something like that:

item.prepend($('<div style="background:url('file[options.baseUrlAttribute] + ''      
+file[options.pathAttribute]}')no-repeat center center / cover"></div>' ));

But it doesn't work and returns an error.

What is the correct syntax to make it work?

can you tell us what the resulting html is? From the looks of it, you're creating an empty div, and prepending it to an item, so it won't have any height. — Joe Lissner
– Joe Lissner, Commented May 24, 2021 at 14:07
item.prepend($('<div style="background:url(' + file[options.baseUrlAttribute] +file[options.pathAttribute]+')no-repeat center center / cover"></div>' )); — Kinglish
– Kinglish, Commented May 24, 2021 at 14:09
@Kinglish this worked fine can you post it as answer so i can select it as the worked answer? — Designer
– Designer, Commented May 24, 2021 at 14:12

Kinglish · Accepted Answer · 2021-05-24 15:18:28Z

2

It's easy to miss typos in long concatenated statements. The fixed code is:

item.prepend($('<div style="background:url(' + file[options.baseUrlAttribute] +file[options.pathAttribute]+')no-repeat center center / cover"></div>' ));

Or broken down for easier reading

const url = file[options.baseUrlAttribute] +file[options.pathAttribute] ;
const tag = '<div style="background:url(' + url + ')no-repeat center center / cover"></div>';
item.prepend(tag);

edited May 24, 2021 at 15:18

answered May 24, 2021 at 14:16

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

How can I use the background property using Javascript instead of using <img> tag?

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