0

Quiero una imagen de fondo en el body del index.html (sera el fondo de pantalla de todas las secciones del sitio) pero no se muestra nunca. No entiendo si debo asignar la imagen al body mismo o tengo que hacerlo en el componente app-root

index.html:

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>MiObservador</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>

styles.css

body{
  background-image: url("/src/assets/images/25101.jpg");
}

El app.component.css y el app.component.html están vacíos.

0

3 respuestas 3

1

Era un error de sintaxis background-image: url("/assets/images/25101.jpg"); Al parecer debo quitarle el "/" del principio, tiene que ver con la etiqueta <base> del index.html por lo poco que pude llegar a averiguar.

0

Puedes asignarle la propiedad background con la directiva ngStyle que es la manera que usa Angular para modificar los estilos de los elementos, seria algo asi:

<div class="image" style="height: 100vh;width:100vw;" [ngStyle]="{'background': 'url(/src/assets/images/25101.jpg)'}"></div>
1
  • Supongo que ese ejemplo es para el body no? Por que no me funciona.
    – Salvador
    Commented el 29 jun. 2022 a las 0:28
0

En la carpeta assets agregar una carpeta images que contenga a tu imagen El camino sera ../assets/images/descarga.jpg

// en tu app.component.scss
#sect1 {  
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image:  url("../assets/images/descarga.jpg");  
 
}
//en tu app.component.html
<div id="sect1"class="container">

</div

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.