Esto es distinto a poner una imagen en un sitio fijo de la página al estilo del botón/imagen "Ir arriba", puesto que no se superpondrá al resto del contenido y por el contrario quedará por debajo de todo.
Ya explicamos que las plantillas tienen una unos contenedores para organizar los elementos principales de la estructura de la página.
El más importante de ellos es el BODY, sin el cual, no existiría la página por la sencilla razón de que es el espacio principal a partir del cual vamos creando los otros.
En la plantilla lo podeis encontrar con un aspecto parecido a este...
body {
background:$bgcolor;
margin:0 5px 0 5px;
color:$textcolor;
font: Trebuchet, Verdana, Sans-serif;
font-size:14px;
}
background:$bgcolor;
margin:0 5px 0 5px;
color:$textcolor;
font: Trebuchet, Verdana, Sans-serif;
font-size:14px;
}
Para colocar/cambiar un fondo uniforme (color plano), podemos hacerlo desde una herramienta que nos da el propio Blogger. Simplemente entramos en Diseño-->Fuentes y colores, buscamos a la izquierda Color de fondo de la página y después de seleccionarlo, escogemos el color que nos guste en la paleta de colores de la derecha. Podemos ir probando colores porque se nos mostrará una vista previa y hasta que no pinchemos en Guardar Cambios, no alteraremos nada de forma definitiva.
El valor hexadecimal del color, es guardado en la varible $bgcolor, por lo que una alternativa sería cambiar directamente esa variable en el código, por el valor que nos interese. Por ejemplo para un fondo blanco (valor #ffffff), habría que cambiar la línea background:$bgcolor; por background:#ffffff;
Una vez dicho esto, cambiar un color plano por una imagen es sencillo si conocemos todos los atributos que puede llevar la instrucción background.
En este caso, tendremos que alojar nuestra imagen bien en Blogger, bien en un servicio externo, y copiar la dirección URL. Entonces, para que se vea una imagen, la línea de código que estamos manejando todo el rato deberá quedar así:
background: url(DIRECCION_IMAGEN);
Hay que tener cuidado con escoger una imagen que pueda irse montando como un puzzle, porque background las va montando como si fueran azulejos, hasta llenar todo el espacio disponible. Si por ejemplo nuestro dibujo tiene 400 pixels de ancho, con resoluciones de 800 px, la imagen se repetirá dos veces; con 1200 px tres veces... y así sucesivamente. En cuanto al alto, la repetición se dará muchas más veces en cualquier blog normal. Esto quiere decir que lo que esté en el lado derecho de la imagen, tiene que casar con lo del lado izquierdo y lo de abajo con lo de arriba. Un ejemplo:
La única diferencia entre estas dos imágenes es que la primera tiene aplicado un degradado...
 |  |
Si las montamos, podreis ver que en el primer caso los bordes derecho-izquierdo, casan bien unos con otros y sin embargo, la unión arriba-abajo no es correcta. Sin embargo, con la otra imagen, el resultado es totalmente uniforme...
Otra solución pero que requerirá imágenes más pesadas (de mayor tamaño) sería diseñar un fondo de un ancho suficiente como para que no tenga que repetirse la imagen en resoluciones de ancho grande. En este caso sólo habrá que preocuparse de que la parte superior de la imagen cuadre con su parte inferior. En un principio, lo normal es que no se pase de 1400 px, pero teneis que saber que hoy día hay pantallas con resoluciones de hasta 7680 pixels de ancho.
Por último, si hacemos una imagen grande, de un alto suficiente como para que ocupe toda la pantalla, normalmente querremos que al hacer scroll vertical, la parte superior de la imagen no se vaya perdiendo. Para eso tendremos que fijarla añadiendo el atributo fixed
background: url(DIRECCION_IMAGEN) fixed;
Ejemplo de web con un fondo fijo:
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Hoy he publicado el nuevo diseño de mi plantilla y que mejor manera de agradecer todo tu esfuerzo que dedicándote un post en mi blog.
ResponderEliminarhttp://danzadanzad.blogspot.com/
Gracias.
Qué sorpresa! Andaba yo leyéndote en el lector de feeds (por cierto, genial tu serie BPT) y de repente me encuentro una imagen bastante familiar! Gracias por el link!
ResponderEliminarTú misma... :)
ResponderEliminarPensé en poner un ejemplo real y me acordé de tu blog, que por cierto está muy bien en cuanto a que es 100% original. Estoy un poco cansado de ver siempre las mismas plantillas y la personalización me parece una forma estupenda de identificar cada blog con su autor y/o contenido.
De hecho me estoy cansando ya de ver el mío y cualquier día me da un arrebato y lo cambio todo.
Un saludo.
Caramba Oloman, ¡qué utiles tus entradas! Hasta estoy aprendiendo a hacer cosucas yo sola.
ResponderEliminarHe cambiado el ancho, me ha quedado bastante chulo... y gracias a tu enlace con el manual de css he hecho que la imagen del fondo principal (el "pergamino") se extendiera por todos lados, porue solamente ensanchando las columnas quedaba "coja" de la parte central.
¡GRACIAS MIL!
No entendi ni papa
ResponderEliminarAlgo habrás entendido ¿no? ¿Qué quieres hacer exactamente?
ResponderEliminarHolaa!!
ResponderEliminaryo tambien tengo dudas con el fondo...te comento, yo lo quería en mi caso es poner abajo de todo de la plantilla una imagen, lo he intentado poner como gadget pero lo que hace obviamente es desplazarme el contador y demás para arriba y si la añado en la plantilla me pasa lo mismo, y yo lo que quiero es que no se mueva el contador y que la imagen quede detrás de este porque va a ser una imagen alargada que ocupe el ancho de la plantilla y que me quede pegada al borde de abajo....creo que me he explicado jijiji
graciasss
Ani, para eso tienes que dar estilo al selector #footer-wrapper. Si no lo tienes créalo y ahí le asignas ancho y fondo.
ResponderEliminarComo siempre genial!!!! muchas gracias, ya ll he puesto, ha quedado muy bien ^^
ResponderEliminarVisto ;)
ResponderEliminarHola mira por mas que intento que la imagen que puse (del monumento a la revolucion) no se repita miles de veces y que se quede estatica no lo logro como puedo hacerlo
ResponderEliminarmira aqui esta
http://unachicaenmexico.blogspot.com/
TT___TT auxilio!!!!!
Pao-chan, tienes una plantilla de las del nuevo diseñador, así que date una vuelta por este enlace: http://goo.gl/ZGwef
ResponderEliminarMuchas gracias, todos los tutos' están geniales, de hecho, ve, estoy poniendo en práctica lo que leo aquí ...pero ahora tengo un problema con esta tiendita on line
ResponderEliminarhttp://tienditadetlane.blogspot.mx
—le he querido cambiar el color de fondo a los post y a las páginas estáticas pero no he podido conseguirlo, las quiero de colores diferentes: post de un color, páginas de otro color
...¿podrías echarme la mano?...
gracias de ante mano, gracias por escribir este blog :)
Para eso tienes que echar mano de las condiciones. Mira el enlace para ver una guía sobre ellas. Lo que tendrías que meter en la adecuada sería un par de etiquetas STYLE (apertura y cierre) y dentro de ellas el background que quieres en cada caso.
Eliminar