ForceLearn
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

App.Html

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

App.css

.body, html { 
    height: 100%; 
    margin: 0; 
} 
.bg { 
/* The image used */ background-image: url("https://c4.wallpaperflare.com/wallpaper/82/204/3/keanu-reeves-john-wick-movies-john-wick-chapter-2-wallpaper-preview.jpg"); 
height: 500px; 
background-position: center; 
background-repeat: no-repeat; 
background-size: cover; 
}

App.Js

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

app.js-meta.xml

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

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

more info : Lightning design themes

Learn more about basics of LWC

ForceLearn

Follow us

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

Most popular

Most discussed