Cómo establecer una imagen de fondo en Angular

Cómo establecer una imagen de fondo en Angular

En este tutorial, aprenderemos cómo configurar una imagen de fondo angular usando estilos en línea y CSS externo.

Índice
  1. Definir la imagen usando estilos en línea
  2. Establecer imagen usando CSS externo

Definir la imagen usando estilos en línea

Ejemplo:

<div [ngStyle]="{backgroundImage:'url(./images/rose.png)'}" >    <h1>Rose image</h1>
</div>

En el código anterior, usamos el ángulo ngStyle directiva de atributo para establecer una imagen de fondo en el div elemento.

No olvides envolver el url() función con comillas simples, de lo contrario angular lo trató como una propiedad.

Establecer imagen usando CSS externo

Ejemplo:

aplicación.componente.html

<div class="container">
    <h1>Rose image</h1>
</div>

aplicación.componente.css

.container{
    background-image: url(./images/rose.png);
}

En el código anterior, primero agregamos un container clase en el div elemento, dentro del archivo CSS establecemos una imagen de fondo para el elemento container clase usando background-image propiedad.

Si quieres conocer otros artículos parecidos a Cómo establecer una imagen de fondo en Angular puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas