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(){
}
}
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.
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>