CODEWITHSUNDEEP
cssangular
Nemanja Grabovac
Nemanja Grabovac

Reputation: 878

Dynamic background image not working - Angular 5

I am setting background image with ngStyle, like this: 

<section [ngStyle]="{'background': 'url(' + backgroundUrl + ') no-repeat 0 0 / cover'}" class="slider flex-center">

In .ts file: 

this.backgroundUrl = this.homeModelResponse.featuredStories[0].fullHDUrl;

The problem is, if user uploads the same images, i get url like this: 

https://..something/264/2970/7745/9960/rawpixel-com-256641_(1)_org_hd_ready.jpg.jpg

with (1) in brackets, and my guess is that css doesn't work good with that, all other images are displayed but just the copies with this type of path are not.

It works with img tag but doesn't with background property in css.

Anyone knows whats wrong?

Upvotes: 1

Views: 2136

Answers (2)

Nemanja Grabovac
Nemanja Grabovac

Reputation: 878

Found the solution.

Background image does not allow (), space, single quotes and double quotes in the image path.

Upvotes: 1

Krishna Rathore
Krishna Rathore

Reputation: 9687

You can add height and width of section tag.

I have create a demo on Stackblitz

<section style="height:300px;width:300px;" [ngStyle]="{'background': 'url(' + backgroundUrl + ') no-repeat 0 0 / cover'}" class="slider flex-center">

Upvotes: 0

Related Questions