How to Add Background-Image Using Ngstyle (Angular2)

How to add background-image using ngStyle (angular2)?

I think you could try this:

<div [ngStyle]="{'background-image': 'url(' + photo + ')'}"></div>

From reading your ngStyle expression, I guess that you missed some "'"...

How to add background image with ngStyle?

You can set it as the following:

<div ...[ngStyle]="{background: 'url('+ product.image+')'"....>

where image is product property for image, indeed.

Angular 2 ngStyle and background-image

Linebreaks within received base64 image was a reason of trouble.
This is my solution:

//This goes to template <div>:
[style.background-image]="makeTrustedImage(images[i].file)"

//And this goes to component:
constructor(private domSanitizer: DomSanitizer) {}

makeTrustedImage(item) {
    const imageString =  JSON.stringify(item).replace(/\\n/g, '');
    const style = 'url(' + imageString + ')';
    return this.domSanitizer.bypassSecurityTrustStyle(style);
  }

How to use ngStyle for background url in Angular 4

background-url is incorrect CSS, use background or background-image instead.

Here is an example of correct syntax:

<div [ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}"></div>

Your full example would look like this:

<li *ngFor="let article of arr; let i=index;" >
   <div *ngIf="i == 0" 
         class="w3l_banner_nav_right_banner" 
         [ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}" >
     <h3> Make your <span>food</span> with Spicy. </h3>
            <div class="more">
                <a href="products.html" class="button--saqui button--round-l button--text-thick" data-text="Shop now">Shop now1</a>
            </div>
    </div>
</li>

Angular 2+: how to overload background-image when using NgStyle with a function

The browser pre-fixes are not required anymore. This requires the following changes to the code to get it to work as it was working with prefixes:

public setBackground() {
    let checkerSize: number = this.getCheckerSizeInPixels();
    return {
      "background-image": `linear-gradient(45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
                          linear-gradient(-45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
                          linear-gradient(45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%),
                          linear-gradient(-45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%)`,

      "background-size": `${checkerSize}px ${checkerSize}px`,

      "background-position":`0 0, 0px ${checkerSize/2}px, ${checkerSize/2}px -${checkerSize/2}px, -${checkerSize/2}px 0px`
    };
}

Changes to background-position are from this post: CSS gradient checkerboard pattern

This solution solves for my specific use-case, but it doesn't answer the broader question: How would this be accomplished if the browser prefixs were still required? If anyone has a solution - I am still interested in hearing it, please post it.

Why is ngStyle background-image not loading?

write background(no-repeat and center center are for background property) rather than background-image

 imageUrl: './../assets/images/DIDiagram.png'

<div mat-card-image class="quiz-topic-image"
      [ngStyle]="{ 'background': 'url("' + quizData?.imageUrl + '") no-repeat center center',
                   'background-size': '95%' }">
    </div>

ngStyle background image not visible

The background-image property sets one or more background images for an element.

If you want to add some more "attributes" then use background instead:

<div [ngStyle]="{
  'background': 'url(' + myBackgroundUrl + ') no-repeat -228px 0', 
  'width': '224px', 
  'height': '248px'
}"></div>

---

Related Topics