Saltar al contenido

¿Cómo configurar la imagen de fondo de Angular 4?

Solución:

Puedes usar ngStyle para establecer el fondo para un div

<div [ngStyle]="{background-image: 'url(./images/' + trls.img + ')'}"></div>

o también puede usar el estilo de fondo integrado:

<div [style.background-image]="'url(/images/' + trls.img + ')'"></div>

Esto funciona para mi:

pon esto en tu marcado:

<div class="panel panel-default" [ngStyle]="{'background-image': getUrl()}">

luego en componente:

getUrl()
{
  return "url('http://estringsoftware.com/wp-content/uploads/2017/07/estring-header-lowsat.jpg')";
}

La siguiente respuesta funcionó para angular 4/5.

En app.component.css

.image{
     height:40em; background-size:cover; width:auto;
     background-image:url('copied image address');
     background-position:50% 50%;
   }

También en app.component.html simplemente agregue lo siguiente

<div class="image">
Your content
</div>

De esta manera pude establecer una imagen de fondo en Angular 4/5.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

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