BPT. Fondo del blog | Oloblogger Nos han preguntado en alguna que otra ocasión, cómo poner una imagen de fondo para el blog. Cómo es ...

16 de noviembre de 2008

BPT. Fondo del blog

Nos han preguntado en alguna que otra ocasión, cómo poner una imagen de fondo para el blog. Cómo es algo bastante sencillo, pues dejamos constancia en un post para futuros "preguntadores".

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;
}

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.

Fuentes y colores
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...

Patrones de fondoPatrones de fondo

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:

Background 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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

16 comentarios :

  1. 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.
    http://danzadanzad.blogspot.com/
    Gracias.

    ResponderEliminar
  2. 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!

    ResponderEliminar
  3. Tú misma... :)
    Pensé 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.

    ResponderEliminar
  4. Hola, tengo una pequeña duda que puede que sea bastante simple pero que no puedo solucionar. He añadido a mi blog una imagen pequeña imagen de fondo en el lateral izquierdo de 200 pixels de ancho y despues esta el fondo plano, por lo que parece una imagen ancha.

    ¿Como puedo hacer para colocar otra imagen alineada a la derecha? Lo he estado intentado pero solo consigo alinear la que tengo a la derecha o sobreponer la otra en el lado contrario =(

    Te dejo la direccion del blog por si no me he explicado bien: http://quintomileniooficial.blogspot.com/

    Gracias por tu ayuda de antemano y por este blog que me esta siendo de tanta ayuda. Un saludo.

    ResponderEliminar
  5. Hola Quinto Milenio. Lo que te voy a explicar es una chapucilla, pero muy fácil de instalar. De otra forma tendrías que cambiar bastante la plantilla y la verdad es, que a bote pronto, no se me ocurre otra solución.

    Después de definir el BODY{ , pones una nueva clase

    #outer-wrapper {background:url(http://i660.photobucket.com/albums/uu328/quintomilenio/Backgroundrightv2.jpg) repeat-y right top;}

    A continuación buscas en la parte de HTML e insertas un DIV con esta ID justo despues de <BODY>. Al final del código cierras el DIV (justo antes del /BODY) para que englobe todo el contenido.

    <body>
    <div id='outer-wrapper'>
    <div id='wrap'>

    ...

    </div>
    </body>
    </html>

    El único problema es que deja unos pixels por encima de la imagen de fondo y no acabo de entender por qué. De todas formas, supongo que es un mal menor.

    Saludos

    ResponderEliminar
  6. Caramba Oloman, ¡qué utiles tus entradas! Hasta estoy aprendiendo a hacer cosucas yo sola.
    He 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!

    ResponderEliminar
  7. Algo habrás entendido ¿no? ¿Qué quieres hacer exactamente?

    ResponderEliminar
  8. Holaa!!
    yo 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

    ResponderEliminar
  9. Ani, para eso tienes que dar estilo al selector #footer-wrapper. Si no lo tienes créalo y ahí le asignas ancho y fondo.

    ResponderEliminar
  10. Como siempre genial!!!! muchas gracias, ya ll he puesto, ha quedado muy bien ^^

    ResponderEliminar
  11. Hola 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
    mira aqui esta
    http://unachicaenmexico.blogspot.com/

    TT___TT auxilio!!!!!

    ResponderEliminar
  12. Pao-chan, tienes una plantilla de las del nuevo diseñador, así que date una vuelta por este enlace: http://goo.gl/ZGwef

    ResponderEliminar
  13. Muchas 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
    http://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 :)

    ResponderEliminar
    Respuestas
    1. 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