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 p using <p> </p> tag, then take a p 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

<p id="sect1" class="container">
    <h2>Now Load image on the display</h2>
</p>

backgroundimage.ts

import { Component } from '@angular/core';

@Component({
  selector: 'backgroundimage',
  templateUrl: './backgroundimage.component.html',
  styleUrls: ['./backgroundimage.component.css']
})
export class BackgroundimageComponent {
  constructor() { }
}

background.css

#sect1 {
  height: 650px;
  color: #fff;
  background-image: url("../../assets/images/back2.jpg");
  background-size: 100%;
  background-size: cover;
}

module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Artservice } from './artservice';
import { BackgroundimageComponent } from './backgroundimage/backgroundimage.component';

@NgModule({
  declarations: [AppComponent, BackgroundimageComponent],
  imports: [BrowserModule],
  providers: [Artservice],
  bootstrap: [BackgroundimageComponent]
})
export class AppModule { }

mains.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Augs</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-background></app-background>
</body>
</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

<p id="sect1" class="container">
  <h2>Now Load image on the display</h2>
  <p class="imgp">
    <img src="../../assets/images/IMG20190923125647.jpg" class="img1" alt="cinque terre">
    <img src="../../assets/images/IMG20190923125712.jpg" class="img1" alt="cinque terre"><br>
    <img src="../../assets/images/IMG20190923175051.jpg" class="img1" alt="cinque terre">
    <img src="../../assets/images/IMG_20191014_102545.jpg" class="img1" alt="cinque terre"><br>
  </p>
</p>

simpleimage.css

.imgp {
  margin-left: 150px;
  height: 150px;
}

.img1 {
  height: 200px;
  width: 200px;
}

simpleimagecomponent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'backgroundimage',
  templateUrl: './backgroundimage.component.html',
  styleUrls: ['./backgroundimage.component.css']
})
export class BackgroundimageComponent implements OnInit {
  constructor() { }

  ngOnInit() {
    // Initialization code here
  }
}

module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Artservice } from './artservice';
import { BackgroundimageComponent } from './backgroundimage/backgroundimage.component';

@NgModule({
  declarations: [
    AppComponent,
    BackgroundimageComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [Artservice],
  bootstrap: [BackgroundimageComponent]
})
export class AppModule { }

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Augs</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <backgroundimage></backgroundimage>
</body>
</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

ImageWithText

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.