My inquiry is quite straightforward - I am currently in the process of developing an Angular 4 application and I require assistance with setting an image as the background for my Home component, filling the entire browser window exclusively within that component. Here is the basic structure of my project:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyAngularApp</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-root></app-root>
</body>
</html>
app.component.html:
<router-outlet></router-outlet>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
home.component.html:
<div class="background">
<p>Example</p>
</div>
home.component.css:
.background {
width: 100%;
background: url('../../assets/background.jpg') no-repeat;
background-size: cover;
color: white;
text-align: center;
}
Upon rendering the Home component, my objective is to have an image occupy the entire browser window as the background specific to that particular component. However, despite previous attempts, I've encountered difficulties in achieving this as the image only fills the background of a single sentence without being responsive.
I appreciate any insights or guidance on resolving this issue. Thank you!