Fondo diferentes automaticos en cada entrada

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

Cuando nos encontramos retocando el diseño de los artículos, nos suele surgir la necesidad de diferenciar cada uno de ellos, no solo por el contenido, si no por su aspecto. El dia de hoy vamos a aprender a mostrar un fondo distinto en cada entrada, dependiendo de la primera imagen.


Instalar

El código no requiere javascript, además se realiza en un único paso. Para ello, vamos a Temas > Editar HTML y buscamos </head> 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; /*repeticion*/
    background-size: cover; /*Tamaño*/
    background-position: top center; /*Alineacion*/
    background-attachment: fixed; /*Mantiene el fondo fijo*/
}</style></b:if>

Guarda los cambios y listo, si visitas una de tus entradas notaras que dependiendo de la primera imagen, el fondo será distinto. No importa si la imagen se sube o no a blogger, el código igual funcionara gracias a las etiquetas data:view de Blogger.


Repetir imagen

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 tomará 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

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


background-position: top center; /*Alineacion*/

En donde reemplazamos top center, por la posiciones tanto horizontal como vertical, si deseas centrar el fondo de forma absoluta, simplemente escribe center, lo que provoca un centrado en ambos ejes.


Fondo fijo

El fondo mantendrá una posición fija por defecto, es decir, que al "bajar" por la pagina, la imagen no se moverá, si deseas cambiar esto, busca lo siguiente:


background-attachment: fixed; /*Mantiene el fondo fijo*/

Y cambia fixed por scroll, de esta forma, la imagen dejara de tener una posicion fija


Aunque es un truco bastante sencillo, de todas formas espero que les sea de utilidad, y que editando el codigo puedan sacarle aun más provecho. Si te ha servido no olvides compartir, eso me ayuda muchisimo. Gracias por pasar.