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