Set background image from static resource in LWC

Adding an images as a background to a div can make the UI really appealing. In this tutorial, we are going to learn how to set background image from static resource in LWC Component.

What we will learn in this article

1. Set a background image in a div tag.
2. Show text content on top of the div with the Image.

Upload the image in the Static Resource and Import in LWC

Step 1: We will upload the image in the static resource.

Step 2: In our JS file of the LWC Component, we will import the static resource. Then use the imported image to show as a div background or in the image tag of the HTML code.

JS Code

import { LightningElement } from 'lwc';
import BackgroundImg from '@salesforce/resourceUrl/BackgroundImage';

export default class BackgroundImage extends LightningElement {
    imageUrl = BackgroundImg;

    get getBackgroundImage(){
        return `background-image:url("${this.imageUrl}")`;
    }
}

Set the image as div background with right size using HTML/CSS

HTML Code

<template>
    <div style="background:white; padding:10px">
        <div class="textheader">
            Below image is rendered as a div background. <br/> 
            with a text message overlay.
        </div>
        <div class="backgroundImg" style={getBackgroundImage} >
            <div class="textoverlay">
                Hi, I am Gourav Bhardwaj. <br/>
                Welcome to my Blog SFDCRocks247
            </div>
        </div>

        <div class="textheader">Below image is rendered using the html image tag.</div>
        <img width="500px" src={imageUrl} />
    </div>
</template>

CSS Code

.backgroundImg{
    width:500px;
    height:250px;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 2000px rgb(84 83 84 / 30%);
}

.textoverlay{
    text-align: center;
    font-size: 30px;
    color: white;
    padding-top: 20%;
}

.textheader{
    font-size: large;
    font-weight: 600;
    margin-top: 10px;
}

Mexa.xml Code

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__Tab</target>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

Explanation:

In our JS Code, we are importing the static resource with the below line

import BackgroundImg from ‘@salesforce/resourceUrl/BackgroundImage’;

Saving the imported reference in BackgroundImg.

Note: In our example we have uploaded image file directly, but if you have uploaded a zip folder you should use the dot notation to use the file.

Example: If your zip folder contains the image file name background.jpeg, then use BackgroundImg.background. BackgroundImg will be the reference to the static resource name.

We store the reference of the static resource in a variable called imageUrl.

In our HTML Code, we have imageUrl js variable to store image location, then use this in the img tag:

i.e <img width=”500px” src={imageUrl} />

Next, to show the image in our div tag, we need to use the background-image property of the CSS. To be able to dynamically set the image from JS file, we have created a getter method called get getBackgroundImage().

The getter method constructs the exact CSS syntax which will show the image as a background of the div tag.

The getter method is used in the style attribute of the div tag, on page load the style attribute gets assigned with the correct image relative path.

The CSS file is created to control the basic styling of the component.

.backgroundImg{
    width:500px;
    height:250px;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 2000px rgb(84 83 84 / 30%);
}

In the style class backgroundImg we define the width and height of the div tag positions the background image in the center of the div and set the background image size to cover.

.textoverlay{
    text-align: center;
    font-size: 30px;
    color: white;
    padding-top: 20%;
}

The style class textoverlay is created to align the text in the centre of the screen and set the right font-size along with color and padding.

Step 3: We are showing this LWC Component as a Custom Lighting tab. Learn how to create Custom Lightning tab here.

Setting an image as a background with an image and text overlay may sound difficult at first but with the above code snippet and explanation, it should be an easy thing for you now.

Do let us know your thoughts in the comment box below and share this article with your friends. Make sure to subscribe to our blog and get notified of new content being created.