LWC: How to use static Resource Image in CSS in Lightning Web Component?

Question

I am trying to use static resource image in CSS using the below code -

JS:

//Importing image from static resource
import My_Resource from '@salesforce/resourceUrl/popUpImage';

//Defining this inside export classs
popUpImage = My_Resource;

CSS:

.bgImage{
    background-image: url({!URLFOR(popUpImage)});
  }

Please help :(

Answer 1

In the CSS file you cannot access property of your JS file.
Anyway you could provide a getter for your CSS rule in your JS class in order to set an inline style to the appropriate tag

JS

get bgImageStyle() {
    return `background-image: url(${My_Resource})`;
}

HTML

<div style={bgImageStyle}>
    something
</div>

Answer 2

try this not in the CSS, but in the HTML: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_resources

Answer 3

This is a use case for a CSS variable:

:host {
    --background-image-url: 'default.jpg';
}
div {
    background-image: var(--background-image-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    height: 20em;
    width: 100%;
}

Then, in your JS:

renderedCallback() {
  this.template.host.style.setProperty('--background-image-url',`url(${My_Resource})`);
}

Demo.