Fondo diferentes automaticos en cada entrada mostrar un fondo distinto en cada entrada

Cuando queremos mejorar el diseño de las entradas, puede surgir la necesidad de diferenciar el aspecto de cada una de ellas. Hoy vamos a mostrar un fondo distinto en cada entrada, que dependerá de la primera imagen del artículo.


Contenido


Instalar

El código no requiere javascript, además se realiza en un único paso. Vamos a Temas Editar HTML, buscamos </head> y arriba de eso pega el siguiente código:


<b:if cond='data:view.isPost'><style>
body {
    background-image: url(<data:view.featuredImage/>); /* imagen */
    background-repeat: no-repeat; /* repetición */
    background-size: cover; /* tamaño */
    background-position: top center; /* alineación */
    background-attachment: fixed; /* desplazamiento */
}</style></b:if>

Nota: Si deseas que funcione tambien en las páginas estáticas, cambia la condición data:view.isPost por data:view.isSingleItem del código anterior.


No olvides guarda los cambios. Si visitas una de tus entradas notarás que ahora puedes usar la primera imagen de la entrada como fondo, para lograrlo, el código utiliza una etiqueta data:view de Blogger.


Repetir fondo

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:


background-repeat: no-repeat; /* repetición */

Y cambia no-repeat por repeat (repetir por ambos ejes), repeat-x (repetir horizontalmente) o repeat-y (repetir verticalmente), según sea necesario.


Dimensión del fondo

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


background-size: cover; /* tamaño */

Y cambia cover por el tamaño real de tu imagen en porcentajes o pixeles, por ejemplo: 1600px.


Posición del fondo

La posición establecida por defecto para el fondo (desde arriba y centrado horizontalmente) se puede modificar buscando lo siguiente:


background-position: top center; /* alineación */

En donde reemplazamos top center, por la posiciones tanto horizontal como vertical, si deseas centrar el fondo en ambos ejes, escribe center y guarda los cambios.


Fondo fijo

El fondo mantendrá una posición fija por defecto, es decir, que al hacer scroll por la página mantendrá su posición en la ventana del navegador, si deseas cambiar esto, busca lo siguiente:


background-attachment: fixed; /* desplazamiento */

Y cambia fixed por scroll, de esta forma, la imagen se desplazará con el resto de los elementos al hacer scroll.


Aunque es un truco bastante sencillo, de todas formas espero que les sea de utilidad. Si te ha servido no olvides compartir, eso me ayuda muchisimo. Gracias por pasar.