I have the URL of an image I'd like to set as background of a div, but I don't know how to do that.

I'm using a @wire method to retrieve name, description and this URL from an obj in Salesforce, so it's saved on a JS variable.

How do I refer that variable in my css?

I tried using inline css like:

<div style={headerURL}></div>

where headerURL is:

get headerURL() {
    return this.obj.headerImageURL;

but it gives me an error in VScode and also it's not working.

Any idea of how to solve this?

  • 1
    I think you should put img tag inside a div to add an image something like below : <div class="someClass"> <img src={headerURL}> </div>
    – Elijah
    Jun 29, 2021 at 10:21

1 Answer 1


You can do that using style. Set the style in JS like below.

get headerURL() {
    return `background-image: url("${this.obj.headerImageURL}");`;


<div style={headerURL}></div>
  • It works! Thanks! Any idea how to get rid of the warnings that vscode gives like "} expected"? Jun 29, 2021 at 10:48
  • @FrancescoGhiselli You can ignore that, or use an alternative way of manipulating style using template query selector and JS code from controller. Jun 29, 2021 at 10:49
  • Thanks, I guess I'll look into the query selector method thanks! Jun 29, 2021 at 11:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .