Referencing a ts property in css file

In my typescript file, I have an object I am getting from an API that has an url property, for example: this.contentInfo.contentDetail.columnContent[0].image.path gives me the url I will need to use to set the background image.

But we are using CSS to set the background image because depending on the width of the screen the image will change to a smaller version using a different path for example

this.contentInfo.components[7].contentDetail.columnContent[1].image.path this would give me the smaller image path.

In our css we just have something like this

background-image: url("/stgw/digital/referrals/assets/Referred_M.png");```

I basically want to reference my object in the CSS like you can do in html

background-image: 
     url({{this.contentInfo.contentDetail.columnContent[0].image.path 
     }})

Is this possible?? If not how would anyone go about setting the background image in url with this being the css I will need to manipulate

#welcome-block {
     background-image: url("/stgw/digital/Referred_S.png");
     background-size: 100%;
     }
   @media (min-width: 960px) {
   #welcome-block {
      background-image: url("/stgw/digital/Referred_M.png");
      background-size: 100%;
    }
   }
   @media (min-width: 1280px) {
   #welcome-block {
     background-image: url("/stgw/digital/Referred_L.png");
     background-size: 100%;
     }