Fullscreen background image in angular-CodePudding

I use the following code to set a picture as background picture in angular. The goal is to have the background image on full screen with no scrolling. A friend of me who knows something about html css says my code is okay. Maybe the reason is angular works a bit different ?! Do you have an idea where my problem is. In fact the output is just one line with "Hello World" and the background just appears on this line.

app.component.html

<html>
<head>
  <title>Hauptmenü</title>
</head>
<body>
  <label class="title">Hello World</label>
</body>

app.component.scss

html {
  margin: 0px;
  height: 100%;
  width: 100%;
}
body {
  background-image: url('../assets/background.jpg');
  margin: 0px;
  min-height: 100%;
  width: 100%;
}

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'SeeIT';

  ngOnInit(){
  }
}

CodePudding user response：

Try this CSS:

html
{
 margin:0px;
 height:100%;
 width:100%;
 background:url('../assets/background.jpg')no-repeat center center fixed; 
 -webkit-background-size:cover;
 -o-background-size:cover;
 -moz-background-size:cover;
 background-size:cover;
}
body
{
 /*no other attributes required for a full screen background image*/
}

It works for me all the time.

CodePudding user response：

I just attempted this and it turns out I had to do this:

<body style="background-image: url(your-image-here); background-size: cover;">

</body>