How to add background-image using ngStyle in Angular2 ?
Last Updated :
31 Jul, 2024
The ngStyle Attribute is used to add some style to an HTML element. In this article, we will learn How to add background-image using ngStyle in Angular. To achieve this, we will follow the below approaches.
Steps for Installing & Configuring the Angular Application
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Project Structure
It will look like the following:
Using [ngStyle] Directive
In this approach, the [ngStyle] is used to bind an object that represents the styles. This directive allows us to set inline styles dynamically based on expressions in the component, along with providing a technique for implementing conditional styles to an HTML element. Here, we will set the background image using the URL from the imageUrl variable.
Example: This example illustrates adding the background-image in Angular2.
HTML
<!-- app.component.html -->
<h2 style="color: green;">GeeksforGeeks</h2>
<h2>How to add background-image using ngStyle in Angular2 ?</h2>
<div style="width: 50%;">
<div [ngStyle]="{'background-image': 'url(' + imageUrl + ')',
'background-size': 'cover', 'height': '300px'}">
</div>
</div>
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
imageUrl =
'https://media.geeksforgeeks.org/wp-content/uploads/20231027171405/
GPL-Live - Now - article - banner - date - extended.webp';
}
// app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { HttpClientModule }
from '@angular/common/http';
import { AppComponent }
from './app.component';
import { ButtonModule }
from 'primeng/button';
import { CardModule, }
from 'primeng/card';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
HttpClientModule,
CardModule,
ButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Output:
Using the [style.background-image] Styling
In this approach, we will use [style.background-image] to set the background. This syntax uses the Property Binding that helps to dynamically set the background-image Property of an HTML element, along with allowing the binding of the value of background-image to a variable or an expression defined in the component.
Example: This is another example that illustrates adding the background-image in Angular2.
HTML
<!-- app.component.html -->
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h2>
How to add background-image using
ngStyle in Angular2 ?
</h2>
<div style="width: 50%;">
<div [style.background-image]="backgroundImg"
[style.width.px]="1500"
[style.height.px]="400">
</div>
</div>
// app.component.ts
import { Component } from '@angular/core';
import { BrowserModule, DomSanitizer }
from '@angular/platform-browser'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
backgroundImg: any;
constructor(private sanitizer: DomSanitizer) {
this.backgroundImg =
sanitizer.bypassSecurityTrustStyle(
'url(
https://media.geeksforgeeks.org/wp-content/uploads/20231027171405/GPL-Live-Now-article-banner-date-extended.webp)');
}
}
// app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { HttpClientModule }
from '@angular/common/http';
import { AppComponent }
from './app.component';
import { ButtonModule }
from 'primeng/button';
import { CardModule, }
from 'primeng/card';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
HttpClientModule,
CardModule,
ButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Output:
Similar Reads
How to Add Image in Text Background using HTML and CSS ? In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `<div>`), set its background to the desired imag
2 min read
How to Add a Background Image in Next.js? Next.js is a powerful React framework that allows for server-side rendering and the generation of static websites. Adding a background image to your Next.js application can enhance the visual appeal of your web pages. This article will guide you through the process of adding a background image to a
3 min read
How to add an image as background image of a web page ? In this article, we will be adding an image as the background image of a web page. Background images are used to make a website more interactive and attractive. It can be applied in many stylings. Approach: In the body tag, specify a background image in the background attribute by passing the URL of
2 min read
How to Add Background Image in CSS? The CSS background-image property is used to add an image as a background to an element.Syntaxbackground-image: url()1. Setting background Image of an ElementA background image is added to an h1 tag using the URL.HTML<h1 style="background-image: url( 'https://media.geeksforgeeks.org/wp-content/up
1 min read
How to Add Background Image in HTML? Adding a background image to an HTML page can enhance the visual appeal and provide a more immersive experience for your website visitors. The <body> background attribute is used to add a background image in HTML, but this attribute is deprecated in HTML5 and is not in use. In place of the bac
3 min read
How to Bind the Background Image in VueJS ? In VueJS, the background images can be set from different types of properties like data property, computed property, or directly from an image source. In this article, we will see the different approaches to bind the background image in VueJS as listed below: Table of Content Using Inline StyleUsing
2 min read