Menu
I have created new component called login,I have to set background image for the component(login.component.html),only for that component.I have tried many solutions provided in stack overflow.But the image is not setting to full height of the body. Below are my project files.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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-root></app-root>
</body>
</html>
app.component.html
<router-outlet></router-outlet>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
@Component({
AppComponent,
LoginComponent
})
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: '', pathMatch: 'full', redirectTo: 'login' },
{ path: 'login', component: LoginComponent },
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
login.component.html
<div class="inventory-body">
<!--content goes here-->
</div>
login.component.css
.inventory-body {
margin: 20px 0px;
color: white;
padding: 20px;
height:auto;
background-image: url('/assets/img/1.jpg');
}
Here is the login.component.ts file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
802
in global style(style.css)
html, body, app-root {
height: 100%;
margin: 0;
}
In (login.component.html)
<body class="inventory-body">
</body>
Next write css(login.component.css) to the selector present in (login.component.html)
.inventory-body {
position: fixed;
min-width: 100%;
background-image: url("/assets/img/img-1.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
background-size: cover;
}
.inventory-body {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
background-image: url('')
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
