Uso el siguiente código para establecer una imagen como imagen de fondo en angular. El objetivo es tener la imagen de fondo en pantalla completa sin desplazamiento. Un amigo mío que sabe algo sobre html+css dice que mi código está bien. ¿Quizás la razón es que angular funciona un poco diferente? ¿Tienes una idea de dónde está mi problema? De hecho, la salida es solo una línea con "Hello World" y el fondo solo aparece en esta línea.
aplicación.componente.html
<html> <head> <title>Hauptmenü</title> </head> <body> <label class="title">Hello World</label> </body>aplicación.componente.scss
html { margin: 0px; height: 100%; width: 100%; } body { background-image: url('../assets/background.jpg'); margin: 0px; min-height: 100%; width: 100%; }aplicación.componente.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'SeeIT'; ngOnInit(){ } }Prueba este 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*/ }Funciona para mí todo el tiempo.
Acabo de intentar esto y resulta que tenía que hacer esto:
<body style="background-image: url(your-image-here); background-size: cover;"> </body>