Using *ngFor element within css to set image background - html

Question

I'm new to web dev and am trying to use an image that I get from Contenful content as a cover image within a div without using an <img>. It works well if I set it as a [src] of an <img> tag within my html file but as far as I could see, using it as an img tag:
<img [src]="blogPost.fields.featuredImage.fields.file.url" alt="">
dint give me the sizing and styling I got from using a div with css file styling:
background: url('/assets/img/landscape3.jpg') center 50% fixed no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
height: 50vh;
padding-top: 15rem;
above I used the same image that exist on contentful but it looks more proportioned and sized as I want when i load it from my pc with a src url.
But since the image I want is from an *ngFor block: *ngFor="let blogPost of blogPosts.items"
i have no idea how to set it as a background image of a div without using <img> tag
here is the code I used:
<mat-grid-list cols="4" gutterSize="1rem" rowHeight="4:3.5" class="main"
*ngIf="blogPosts$ | async as blogPosts">
<div *ngFor="let blogPost of blogPosts.items">
<mat-grid-tile *ngIf="blogPost.fields.category === 'Science &
Tech'">
<div class="tile">
<div class="title"><p>{{ blogPost.fields.title }}</p></div>
<img [src]="blogPost.fields.featuredImage.fields.file.url" alt="">
</div>
</mat-grid-tile>
This is want I want to try:
<mat-grid-list cols="4" gutterSize="1rem" rowHeight="4:3.5" class="main"
*ngIf="blogPosts$ | async as blogPosts">
<div class="for" *ngFor="let blogPost of blogPosts.items">
<mat-grid-tile *ngIf="blogPost.fields.category === 'Science & Tech'">
<div class="tile">
<div class="title"><p>{{ blogPost.fields.title }}</p></div>
<div class="img"></div>
</div>
</mat-grid-tile>
css:
.img {
margin-top: 0px;
background: url('blogPost.fields.featuredImage.fields.file.url') center
50% fixed no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover center 50% fixed no-repeat;}
So is it possible to use the resource im getting im my html *ngFor in my css file? or am I asking the right question when there is an alternative way?

Answer 1

You can bind blogPost.fields.featuredImage.fields.file.url property to inline style background of div with img class.
The following HTML code would work for you:
<mat-grid-list cols="4" gutterSize="1rem" rowHeight="4:3.5" class="main" *ngIf="blogPosts$ | async as blogPosts">
<div class="for" *ngFor="let blogPost of blogPosts.items">
<mat-grid-tile *ngIf="blogPost.fields.category === 'Science & Tech'">
<div class="tile">
<div class="title">
<p>{{ blogPost.fields.title }}</p>
</div>
<div class="img" [style.background]="'url(' + blogPost.fields.featuredImage.fields.file.url + ') center 50% fixed no-repeat'"></div>
</div>
</mat-grid-tile>
</div>
</mat-grid-list>

Answer 2

You could use inline styles for this. Those are style properties given to an element through a HTML tag attribute.
You should provide a default or fallback image in your styles and override it with inline styles like this:
div {
display: inline-block;
margin: 0.5em;
height: 200px;
width: 200px;
background-color: teal;
background-repeat: no-repeat;
background-size: cover;
}
<div>Default background color</div>
<div style="background-image: url('https://i.stack.imgur.com/roCfw.jpg');">Dynamic background image</div>

Answer 3

Use a directive in combination with inline CSS, angular-style
<mat-grid-list cols="4" gutterSize="1rem" rowHeight="4:3.5" class="main"
*ngIf="blogPosts$ | async as blogPosts">
<div *ngFor="let blogPost of blogPosts.items">
<mat-grid-tile *ngIf="blogPost.fields.category === 'Science &
Tech'">
<div class="tile">
<div class="title" [bgImage]="blogPost.fields.featuredImage.fields.file.url">
<p>{{ blogPost.fields.title }}</p>
</div>
</div>
</mat-grid-tile>
#Directive({
selector: '[bgImage]'
})
export class BgImageDirective {
#Input() bgImage?: string;
#HostBinding('style.background-image')
private get finalImageUrl() {
return this.sanitizer.bypassSecurityTrustStyle(
'url(' + (this.bgImage ?? '') + ') center 50% fixed no-repeat'
);
}
constructor(
private sanitizer: DomSanitizer
) {}
}