Add Background image to LWC

Add Background image to LWC

Spread the love

Add Background image to LWC

Hi All, Long time,

Today I want to show here a use case, we are going to build an LWC component with a background image


<template >
<div class="body">
<div class="bg">
<p>I am John Wick.</p>


.body, html { 
    height: 100%; 
    margin: 0; 
.bg { 
/* The image used */ background-image: url(""); 
height: 500px; 
background-position: center; 
background-repeat: no-repeat; 
background-size: cover; 


import { LightningElement } from 'lwc'; 
export default class Johnwick extends LightningElement {}


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">

By using the above code you can Add Background image to LWC

more info : Lightning design themes

Learn more about basics of LWC


1 comment

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.

Most popular

Most discussed