How To Set The Background And Simple Image In Angular

Introduction

 
Images are used to change the view of the application. Users use different types of methods to set the image in an Angular application. Images are used to your application and website more attractive. Images provide you more opportunities to attract new visitors. They can increase the ranking of your application in search engines. They also help you to make a good first impression. If your website has an appealing image, there is more chance of people viewing and clicking on it. Users use different types of methods to change the view of the application according to the user such as background images and a simple image.
 

Background Image

 
Step 1
 
To change the image background you have to create an application using the command "ng new my-app".
 
Step 2
 
Go to the appcomponent.html page and create a div using <div> </div> tag, then take a div class and id.
 
Step 3
 
Go to the style.css page and put their id/class name with curly braces (.{}). Then use a background-image property and put the image name with the proper path in the URL sections like “background-image = URL(assets/images/back.jpg”)”
 
Step 4
 
Now press Ctrl+S to save all changes.
 
Background.html 
  1. <div id="sect1"class="container">       
  2.   <h2>Now Load image on the displa\</h2>  
  3.   </div>      
backgroundimage.ts
  1. import { Component, OnInit } from '@angular/core';   
  2.    @Component({       
  3.  selector: 'backgroundimage',    
  4.     templateUrl: './backgroundimage.component.html',     
  5.    styleUrls: ['./backgroundimage.component.css']    })   
  6.   
  7.   export class BackgroundimageComponent {  
  8.       constructor() { }   
  9.    }      
background.css
  1. #sect1 {  
  2.     height: 650 px;  
  3.     color: #fff;background - image: url("../../assets/images/back2.jpg");  
  4.     background - size: 100 % ;  
  5.     background - size: cover;  
  6. }   
module.ts
  1. import { BrowserModule } from '@angular/platform-browser';  
  2.   import { NgModule } from '@angular/core';  
  3.   import { AppComponent } from './app.component';  
  4.   import { astservice } from './artservice';  
  5.   import { BackgroundimageComponent } from './backgroundimage/backgroundimage.component';   
  6.  @NgModule({    
  7.   declarations: [      AppComponent,      BackgroundimageComponent    ],  
  8.     imports: [      BrowserModule    ],    
  9.   providers: [astservice],     
  10.  bootstrap: [BackgroundimageComponent]  })  exportclass AppModule { }    
mains.ts
  1. import { enableProdMode } from '@angular/core';  
  2. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';  
  3.   
  4. import { AppModule } from './app/app.module';  
  5. import { environment } from './environments/environment';  
  6.   
  7. if (environment.production) {  
  8.   enableProdMode();  
  9. }  
  10.   
  11. platformBrowserDynamic().bootstrapModule(AppModule)  
  12.   .catch(err => console.error(err));  
index.html
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Augs</title>  
  6.   <base href="/">  
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.   <link rel="icon" type="image/x-icon" href="favicon.ico">  
  9. </head>  
  10. <body>  
  11. <app-background></app-background>  
  12. </body>  
  13. </html>  
Now you have to compile the application using the command "ng serve". After successfully compiling the application, you have to go to the web browser and hit the command "localhost:4200". After a few seconds, you can see that your output has been changed according to your image.
 
Output

 

How to Load a Simple Image on Angular

 
A simple image is used to change the view of your application.
 
Step 1
 
Upload the simple image you need to create an application using the command " ng new my-app". 
 
Step 2
 
You have to open your HTML component and then use the image tag and put the image with a name or with their proper path, such as:
 
<img src=” ../../assets/images/image.jpg” class=” img1”> .
 
Step 3
 
Now go to the appcomponent.css page to edit or resize the image according to the requirements.
 
Step 4
 
Now you have to press Ctrl+S to save all changes. 
 
simpleimage.html
  1. <div id="sect1" class="container">  
  2.     <h2>Now Load image on the displa\</h2>  
  3.     <div class="imgdiv">  
  4.         <img src="../../assets/images/IMG20190923125647.jpg" class="img1" alt="cinque terre">  
  5.             <img src="../../assets/images/IMG20190923125712.jpg" class="img1" alt="cinque terre">  
  6.                 <br>  
  7.                     <img src="../../assets/images/IMG20190923175051.jpg" class="img1" alt="cinque terre">  
  8.                         <img src="../../assets/images/IMG_20191014_102545.jpg" class="img1" alt="cinque terre">  
  9.                             <br>  
  10.                             </div>     
simpleimage.css
  1. .imgdiv{      
  2.      margin-left150px;      
  3.      height150px;      
  4. }      
  5. .img1{      
  6.      height200px;      
  7.      width200px;           
  8. }        
simpleimagecomponent.ts
  1. import { Component, OnInit } from '@angular/core';        
  2. @Component({      
  3.   selector: 'backgroundimage',      
  4.   templateUrl: './backgroundimage.component.html',      
  5.   styleUrls: ['./backgroundimage.component.css']      
  6. })      
  7. export class BackgroundimageComponent {        
  8.   constructor() { }         
  9. }    
module.ts
  1. import { BrowserModule } from '@angular/platform-browser';    
  2. import { NgModule } from '@angular/core';    
  3. import { AppComponent } from './app.component';    
  4. import { astservice } from './artservice';    
  5. import { BackgroundimageComponent } from './backgroundimage/backgroundimage.component';    
  6. @NgModule({    
  7.   declarations: [    
  8.     AppComponent,    
  9.     BackgroundimageComponent    
  10.   ],    
  11.   imports: [    
  12.     BrowserModule    
  13.   ],    
  14.   providers: [astservice],    
  15.   bootstrap: [BackgroundimageComponent]    
  16. })    
  17. export class AppModule { }     
main.ts
  1. import { enableProdMode } from '@angular/core';    
  2. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';    
  3. import { AppModule } from './app/app.module';    
  4. import { environment } from './environments/environment';    
  5. if (environment.production) {    
  6.   enableProdMode();    
  7. }    
  8. platformBrowserDynamic().bootstrapModule(AppModule)    
  9.   .catch(err => console.error(err));     
index.html
  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4.   <meta charset="utf-8">    
  5.   <title>Augs</title>    
  6.   <base href="/">    
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">    
  8.   <link rel="icon" type="image/x-icon" href="favicon.ico">    
  9. </head>    
  10. <body>    
  11.  <backgroundimage></backgroundimage>    
  12. </body>    
  13. </html>    
Now you have to compile the application by using the command "ng serve", after it successfully compiles you have to go to the web browser and hit "localhost:4200" and run the application. After a few seconds, your images are displayed in the browser, and your output will be shown, such as:
 
Output
 
I hope you enjoyed this article. To learn more about Angular, follow me on C# Corner. Also, to learn about more technologies follow C# Corner.