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.
attr
funciona bien para la propiedadcontent
, para el resto no, aceptas un respuesta en javascript?