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

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" 
  *ngIf="blogPosts$ | async as blogPosts">
   <div *ngFor="let blogPost of blogPosts.items">
      <mat-grid-tile *ngIf="blogPost.fields.category === 'Science & 
      Tech'">
   <div >
     <div ><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" 
*ngIf="blogPosts$ | async as blogPosts">
<div  *ngFor="let blogPost of blogPosts.items">
<mat-grid-tile *ngIf="blogPost.fields.category === 'Science & Tech'">
<div >
<div ><p>{{ blogPost.fields.title }}</p></div>
<div ></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?

CodePudding user response：

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>

CodePudding user response：

Use a directive in combination with inline CSS, angular-style

<mat-grid-list cols="4" gutterSize="1rem" rowHeight="4:3.5" 
  *ngIf="blogPosts$ | async as blogPosts">
   <div *ngFor="let blogPost of blogPosts.items">
      <mat-grid-tile *ngIf="blogPost.fields.category === 'Science & 
      Tech'">
   <div >
     <div  [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
  ) {}
}

CodePudding user response：

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"  *ngIf="blogPosts$ | async as blogPosts">
  <div  *ngFor="let blogPost of blogPosts.items">
    <mat-grid-tile *ngIf="blogPost.fields.category === 'Science & Tech'">
      <div >
        <div >
          <p>{{ blogPost.fields.title }}</p>
        </div>
        <div  [style.background]="'url('   blogPost.fields.featuredImage.fields.file.url   ') center 50% fixed no-repeat'"></div>
      </div>
    </mat-grid-tile>
  </div>
</mat-grid-list>