¿Cómo puedo usar una imagen como fondo agregando la url en el HTML?

publicado por: Anonymous

En una aplicación rails tengo que agregar una imagen que subió un usuario como fondo en un div. La cuestión es que estoy buscando una forma de incluir la imagen como fondo (usando css) pero sin modificar dichos estilos.

Podría embeber los estilos en el html, pero eso me parece poco elegante ya que ensucia mucho el html:

<div style="background: url('fondo.jpg');"></div>

Por otro lado, tampoco quiero usar un tag img porque es más difícil de ubicar en el diseño.

¿Se les ocurre alguna buena idea?


Una idea que se me ocurrió es usar data-attributes:

<div class="img"
     data-background="https://www.gravatar.com/avatar/224f5b1b5ee448ec8152236ede91908c.png">
</div>

Y usar en los estilos attr:

.img {
   background: no-repeat center/100%;
   width: 100px;
   height: 100px;
   background-image: attr(data-background url);
}

Pero al parecer attr no está soportado en la mayoría de los navegadores.

solución

Tienes razón en lo attr. Está en la recomendación de W3 pero ningún navegador la soporta en este momento fuera del atributo content (lo que es algo triste porque podría ser muy útil… aunque esa es otra historia).

Como puedes ver en estas conversaciones del foro de bugs de Chromium y del foro de bugs Mozilla, no está planeado arreglar esto en Firefox o Chrome a corto plazo, así que seguramente tu mejor opción sea ir con alguna alternativa. Aparte de poner el CSS inline en la etiqueta, aquí dejo un par de alternativas más:

Alternativa 1: Usando JavaScript

  • Añade la URL de la imagen en el atributo data-background como ya estás haciendo.
  • Cuando se cargue la página, ejecuta un pequeño script que:
    • Selecciona los elementos que tengan el atributo data-background
    • Dinámicamente asigne el valor del atributo como imagen de fondo.

El resultado se vería así:

_x000D_

_x000D_

var imgs = document.querySelectorAll("[data-background]");_x000D_
for (var x = 0; x < imgs.length; x++) {_x000D_
  imgs[x].style.backgroundImage = "url(" + imgs[x].dataset["background"] + ")";_x000D_
}

_x000D_

.img {_x000D_
  width:100px;_x000D_
  height:100px;_x000D_
  background-size:100% 100%;_x000D_
}

_x000D_

<div class="img" data-background="https://www.gravatar.com/avatar/224f5b1b5ee448ec8152236ede91908c.png"></div>

_x000D_

_x000D_

_x000D_


Alternativa 2: Usando CSS inline

Otra opción sin JavaScript, incluiría CSS inline aunque en lugar de ir en la etiqueta, iría al final del documento (de este modo no se “ensucia” tanto).

La idea sería:

  • Definir un array en el back-end (Rails en este caso) que contendrá una lista de las imágenes.
  • Cada vez que tengas que asignar una imagen:
    • Guarda la imagen en el array
    • Asigna al elemento una clase/id que permita enlazarla con el índice del array (p.e.: la primera imágen irá en el índice 0 y el elemento tendría la clase img0)
  • Al final del documento, añade una sección de estilos donde imprimirías la clase con la imágen de fondo correspondiente.

El resultado se vería así:

_x000D_

_x000D_

.img {_x000D_
  width:100px;_x000D_
  height:100px;_x000D_
  background-size:100% 100%;_x000D_
}

_x000D_

<div class="img img0"></div>_x000D_
_x000D_
<div class="img img1"></div>_x000D_
_x000D_
<p>Más código aquí</p>_x000D_
_x000D_
<!-- Al final del documento -->_x000D_
<style>_x000D_
  .img.img0 { background-image: url(https://www.gravatar.com/avatar/224f5b1b5ee448ec8152236ede91908c.png); }_x000D_
  .img.img1 { background-image: url(https://i.stack.imgur.com/dK3SK.jpg); }_x000D_
</style>

_x000D_

_x000D_

_x000D_

De este modo el HTML se mantendría más limpio, aunque tendrías esa sección style al final que tampoco se ve genial.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *