Background Image programmatically

Hi guys,
I need to set the background image programmatically and the his position (center). I used this snippet but I don’t understand how I can add background-position attribute.

<div class="ads-box ads-box-img" [style.backgroundImage]="smallAds[adsCount][0].image"></div>

Could you please support me?


Create a class in HTML

<div class="yourclass">
your content

Go to CSS

.yourclass{  background: url('../img/yourbackground.png') no-repeat center;
  background-size: cover;

1 Like

This solution is not applicable for my scenario.
I don’t know the background url. It is sent by backend via REST API.

should be [style.background-image]="‘url(’+mySanitizedUrl+’)’" for the background image. For the positioning, is it always centered? Then I would just set it through regular css on the image, regardless the fetched url set in the template.