Allowing users to set the background image of a div

Question

I'm trying to figure out how to allow my users to set the property of an LWC and have the URL they input be used as the background image of the the div.

I'm trying to set CSSproperties using javascript, but it seems as if the input isn't being recorded.

I was following the method explained here: https://www.youtube.com/watch?v=ENRVbA3bqzY

Any idea where I've gone wrong and how to correct it? Thanks in advance!

HTML:

<template>
    <div class="wrapper">
       <div class="background">
         <div class="logo">
         </div>  
        <div class="scoreboard"> 
          <h2 class="scoreboard_heading">TOTAL GIFTS:</h2>
          <p class="scoreboardp"><strong>{donors}</strong></p>
          <h2 class="scoreboard_heading">TOTAL RAISED:</h2>
          <p class="scoreboardp"><strong>${amount}</strong></p>
        </div>
     </div>
   </div>
</template>

JS:

import { LightningElement, api, track, wire } from 'lwc';
import getCampaigns from '@salesforce/apex/testCampaign.getCampaigns'
import { getRecord,getFieldValue } from 'lightning/uiRecordApi';
import AMOUNTWONOPPORTUNITIES__FIELD from "@salesforce/schema/Campaign.AmountWonOpportunities";
import NUMDONOR__FIELD from "@salesforce/schema/Campaign.NumberOfWonOpportunities";

const fields = [AMOUNTWONOPPORTUNITIES__FIELD,NUMDONOR__FIELD];

export default class DoGheader2 extends LightningElement {
    @api background;
    @api campaignid;
    @wire(getRecord,{recordId: "$campaignid", fields})
    campaign;

    renderedCallback(){
        this.template
            .querySelector(".wrapper")
            .style.setProperty("--background",this.background);}
   
    renderedCallback(){console.log(this.campaign.data);}
    get amount(){
        return getFieldValue(this.campaign.data,AMOUNTWONOPPORTUNITIES__FIELD);}
    get donors(){
        return getFieldValue(this.campaign.data,NUMDONOR__FIELD);}  
}

CSS:

.wrapper{
    --background:https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg;
    background-color: #FFFFFF;
    max-width: 100%;
    min-width: 100%;
    clear: none;
   
  }
  .background{
    
    background-image:URL(var(--background));
    background-size: cover;  
      min-height:50vh;
      width:100%;
      display:flex;
      align-items:center;
  
  }
  .scoreboard{
    margin:auto;
    margin-right: 5%;
    padding:20px;
    min-width:15%;
    background: linear-gradient(#0009, #0009);
    text-align:center;
    float:right;
  
  }
  .scoreboard_heading{
  color:#FFFFFF;
    font-size:;
  }
  .scoreboardp{
    color:#EA6522;
    font-size:2em;
  }
  .logo {
    content:url(https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg);
    max-width:15%;
    margin-left: 1%;
    float:left;
  
  }

JS-meta.XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
<targets>
    <target>lightningCommunity__Page</target>
    <target>lightningCommunity__Default</target>
</targets>
<targetConfigs>
    <targetConfig targets="lightningCommunity__Default">
        <property label="selectedCampaignId" name="campaignid" type="String" datasource="apex://MyCampaigns"/>
        <property name="background" type="String" label="Background Image"/>
    </targetConfig>
</targetConfigs>
</LightningComponentBundle>

Answer 1

Note that you need url(...) for a URL to work, and that it is case sensitive.

You need to use var by itself:

background-image:var(--background);

Then, you need to include the url(...) bit:

renderedCallback() {
  this.template.querySelector('.wrapper')
   .style.setProperty('--background', `url(${this.background})`);
}