2

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.

2
  • 1
    attr funciona bien para la propiedad content, para el resto no, aceptas un respuesta en javascript? Commented el 2 mar. 2016 a las 19:22
  • Creo que si no quieres CSS inline, en este momento, sólo se podría hacer con JavaScript
    – Alvaro Montoro
    Commented el 2 mar. 2016 a las 19:40

2 respuestas 2

2

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í:

var imgs = document.querySelectorAll("[data-background]");
for (var x = 0; x < imgs.length; x++) {
  imgs[x].style.backgroundImage = "url(" + imgs[x].dataset["background"] + ")";
}
.img {
  width:100px;
  height:100px;
  background-size:100% 100%;
}
<div class="img" data-background="https://www.gravatar.com/avatar/224f5b1b5ee448ec8152236ede91908c.png"></div>


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í:

.img {
  width:100px;
  height:100px;
  background-size:100% 100%;
}
<div class="img img0"></div>

<div class="img img1"></div>

<p>Más código aquí</p>

<!-- Al final del documento -->
<style>
  .img.img0 { background-image: url(https://www.gravatar.com/avatar/224f5b1b5ee448ec8152236ede91908c.png); }
  .img.img1 { background-image: url(https://i.sstatic.net/dK3SK.jpg); }
</style>

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.

1

Para el fondo con css la pones body

background-img:url("");

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.