I am unable to show background image from static resource in Lightning web component,Kindly help me on this, Advance thanks


.background_img {
    background-image: url('/resource/1602781955000/NCRN_HeroImage');


<div class="background_img">{backgroundUrl}</div>


import { LightningElement, track, wire, api } from 'lwc';

import backgroundUrl from "@salesforce/resourceUrl/NCRN_HeroImage";

export default class NcrnHeroComponent extends NavigationMixin(LightningElement) {

  get backgroundStyle() {
        return `height:50rem;background-image:url(${backgroundUrl})`;

  • If possible ,Kindly suggest any other alternative to add background image from static resource for lightning web component – ChiranjibCODEX Oct 20 '20 at 10:34

As you have already defined the getter for background style.

get backgroundStyle() {
    return `height:50rem; background-image:url(${backgroundUrl})`;

Just use that to define the style on the div.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.