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
    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 that you have read and understand our privacy policy and code of conduct.

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