how to add background image in angular template instead css file

Question

Hi can you please tell me how to add background image in angular using ngfor slide/grid class is the carousel.

<div class="slide slick-bg s-bg-1" *ngFor="let movie of nowPlaying" style="https://image.tmdb.org/t/p/w500/{{movie?.poster_path}}">
           
                <div class="slider-inner h-100">
                    <h1 class="slider-text big-title title text-uppercase">{{movie?.title}</h1>
                
                <p data-animation-in="fadeInUp" data-delay-in="1.2">
                    {{movie?.overview}}
                </p>
                 
                </div>
            </div>

.slick-bg { padding: 100px 0 50px;width:100%; background-size: cover;background-position: center center; background-repeat: no-repeat; height: 90vh; position: relative; z-index: 1;}
.s-bg-1 { background-image: url(../images/slider/slider1.jpg); } // need to add this class url here.. https://image.tmdb.org/t/p/w500/{{movie?.poster_path}}

Laphaze · Accepted Answer · 2020-09-09 12:38:21Z

2

You need to use the correct angular attribute for adding dynamic background image

<div class="slide slick-bg s-bg-1" *ngFor="let movie of nowPlaying" [ngStyle]="{'background-image': 'url(https://image.tmdb.org/t/p/w500/' + movie?.poster_path + ')'}">
    <div class="slider-inner h-100">
        <h1 class="slider-text big-title title text-uppercase">{{movie?.title}}</h1>
        <p data-animation-in="fadeInUp" data-delay-in="1.2">
            {{movie?.overview}}
        </p>
    </div>
</div>

answered Sep 9, 2020 at 12:38

Laphaze

3861 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomas · Accepted Answer · 2020-09-09 13:25:59Z

1

Just add this style to your html template in oder to make the background images dynamic.

<div [ngStyle]="{background: 'url(https://image.tmdb.org/t/p/w500/' + movie?.poster_path +')', width: '200px', height: '150px'"></div>

answered Sep 9, 2020 at 13:25

Thomas

443 bronze badges

Collectives™ on Stack Overflow

how to add background image in angular template instead css file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related