setting background image in lightning web component

Question

I have my background.png file in my staticresource folder, when I set it as an image I could be able to see that image in application, but if I set as background image ,it is not visible.why is it so?

CSS:

   .background_img {
    background-image: url('../../staticresources/background/background.png');
     }

The above given code is what I added in css.

HTML:

<div class="background_img">
      <div style= {backgroundUrl}>
        <h1>Salesforce project</h1>
    </div> 
</div>

JS:

 import { LightningElement } from 'lwc';
 import  backgroundUrl from '@salesforce/resourceUrl/background';
 export default class Sampleapp extends LightningElement {
 get backgroundStyle() {
   return `height:50rem;background-image:url(${backgroundUrl})`;
  }
 }

Answer 1

You need to import the static resource url and then use it.

Here is example:

HTML:

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

JS:

import { LightningElement } from 'lwc';
import backgroundUrl from '@salesforce/resourceUrl/background';

export default class Poc extends LightningElement {
    get backgroundStyle() {
        return `height:50rem;background-image:url(${backgroundUrl})`;
    }
}

Answer 2

You could store the image in a static resource, and in the CSS file of the Lightning web component you could use the below mentioned syntax.

background-image: url('/resource/static_resource_name');