Background Image programmatically

Ionic Framework ionic-v3
1

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?

Thanks
Luca

2

Create a class in HTML

<div class="yourclass">
your content
</div>

Go to CSS

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

}
1 Like
3

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

4

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.