Utilizar una imagen de fondo en lugar de un color sólido puede ser un excelente añadido para darle más personalizada a nuestros artículos. Hoy te voy a enseñar a utilizar la primera imagen como fondo en cada entrada automáticamente.
Habilitar fondo automático
Blogger tiene una genial inclusion global que nos permite agregar un fondo responsive. No se requiere javascript, solo edita tu plantilla en modo HTML y busca </head>, arriba de eso pega el siguiente código:
<b:if cond='data:view.isPost and data:view.featuredImage'>
<b:include
name='responsiveImageStyle'
data='{ image: data:view.featuredImage, selector: "body" }'/>
<style>
body {
background-repeat: no-repeat; /* repetición */
background-size: cover; /* tamaño */
background-position: top center; /* alineación */
background-attachment: fixed; /* desplazamiento */
}
</style>
</b:if>Eso es todo, ahora solo dirígete a cualquiera de tus artículos y empezarás a ver un fondo automático responsivo, basado en la primera imagen del artículo. Si la entrada no tiene imagen no verás nada.
Explicación
El código tiene una condición, la cual verifica dos cosas. Primero que se trate de un artículo data:view.isPost y segundo que el artículo contenga una imagen data:view.featuredImage. Cuando ambos casos se cumplen, entonces procedemos a crear el fondo.
En cuanto al fondo, la inclusión que agregamos creará un fondo que cambiará dependiendo del dispositivo del usuario, de esa manera, si tu página es vista desde un PC de escritorio, cargará una imagen de mayor resolución, pero en móviles la imagen será mucho más pequeña, lo que nos ayuda mucho a tus usuarios a ahorrar datos, manteniendo la optimización de tu blog.
Personalizar
Los estilos de la etiqueta <style> se encargan de darle formato a ese fondo, he dejado comentarios en el código, así sabrás qué función tiene cada propiedad por si deseas modificarlo, de todas formas aquí te explico un poco más lo que puedes hacer.
Repetir
Por defecto, el código que pegamos no repite la imagen en ninguno de los ejes, si por alguna razón necesitas que la imagen se repita, busca esta parte y cambia no-repeat por repeat:
background-repeat: no-repeat; /* repetición */Dimensiones
El fondo ocupará todo el tamaño disponible en la ventana y no dejará espacios. Si por alguna razón necesitas establecer un tamaño fijo en lugar de uno automático, busca esta parte y cambia cover por otro tamaño:
background-size: cover; /* tamaño */Posición
La posición establecida por defecto es desde arriba y centrado. Si deseas modificar esto, busca esta parte y cambia top center por otra posición como por ejemplo center:
background-position: top center; /* alineación */Fondo fijo
Por defecto el fondo tiene una posición fija, es decir, que al desplazarse por la página mantendrá su lugar en la ventana del navegador, si deseas cambiar esto, busca esta parte y cambia fixed por scroll:
background-attachment: fixed; /* desplazamiento */Conclusión
Aunque es un truco bastante sencillo, de todas formas espero que te sea de utilidad. Si te ha servido no olvides compartir, eso me ayuda muchísimo. Gracias por pasar y cualquier duda, déjala en los comentarios.
