A veces vemos unos sitios web chulísimos con unos fondos de página supercurrados que hacen que nos muramos de envidia y nos preguntemos el típico “¿eso como se hace?”. Voy a intentar dar respuesta rápida en un único artículo a dos cuestiones bien diferentes, la primera es ¿cómo hacer un fondo de página?, y la segunda es ¿como utilizar fondos de página con CSS?. Antes de que os lo pregunteis, si, fondo de página y background es lo mismo. A partir de ya, lo llamaremos background, porque en css tenemos por ejemplo background-color (que es el color de fondo de una página) y background-image (que es la imagen de fondo de una página), aparte de más propiedades aplicables a los backgrounds.
El principio, ¿cómo hago un background o fondo para mi web?. Pues lo primero es que depende de lo que quieras hacer… si quieres hacer un background que se va a repetir indefinidamente en la página, lo mejor es recurrir a creadores de backgrounds o fondos como los que pueden hacerse con bgMaker. Esta web te ofrece de forma sencilla y gratuita una herramienta para crear diseños de fondos sencillos, como por ejemplo lineas sobre fondos de color, etc… Simplemente eliges un color y pulsas “Fill”, con lo que el cuadrado (cuyo tamaño puedes cambiar) se rellena de ese color, y luego seleccionas otros colores y haces tu diseño sobre el área rellenada, dibujando lo que te apetezca. Es fundamental que al dibujar el diseño lo hagamos de forma que el fondo quede continuo, que al repetirse no haya cortes… Una vez hecho un diseño, lo guardamos con “Save” en la misma web y lo utilizaremos como fondo, pero daros cuenta de que los diseños hechos de este tipo solo sirven para repetirse indefinidamente a lo largo de la página. Lo más importante es hacer un diseño de fondo pequeño, para que no pese, y que esté bien hecho para que la continuidad de las formas quede bien si se repite de forma infinita. Voy a hacer unos ejemplos…
Que quede claro que esto son solo unos ejemplos, ya que podemos diseñar los fondos como queramos o bien diseñar fondos mucho más grandes en tamaño y elementos. Yo simplemente os habló de esta opción por ser muy agradecida visualmente ya demás tener muy poco peso, lo que hace que la navegabilidad no se vea afectada y el rendimiento de la web sea bueno.
Ahora viene la segunda cuestión, ¿como utilizar backgrouns o fondos de página con CSS en mis diseños web?. Para explicarlo voy a utilizar los tres archivos png que he creado y que podeis ver más arriba. Para mostraros el resultado voy a emplear el mismo ejemplo de web que utilicé en el post Hacer un diseño web centrado con CSS, ¿cómo se hace? e iremos viendo como varía su diseño según el fondo que le pongamos.
En primer lugar, tenmos nuestra hoja de estilos: layout01.css, en la que tenemos la etiqueta body, que se aplica a todas las páginas del sitio web salvo que le indiquemos otra cosa. En este caso, actualmente tenemos esta etiqueta body en nuestra hoja css:
body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-color: #003366;
}
Con esta etiqueta lo que tenemos es nuestras páginas con un color de fondo azul oscuro y punto, nada más. Si quisieramos, podriamos cambiar ese color de fondo simplemente cambiando el color hexadecimal, y así por ejemplo si queremos un fondo blanco pues pondriamos esto:
body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-color: #ffffff;
}
Pero a lo que vamos, para insertar un fondo de imagen, yo os aconsejo conservar también el fondo de color solido, más que nada porque si hay un fallo en la ruta de la imagen o algún problema, os cargue un colora decuado con el diseño. Para que se inserte el fondo layout01.png pondremos en la etiqueta body:
body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/layout01.png);
background-color: #ffffff;
}
MUY IMPORTANTE: Aseguraros de que la ruta de la imagen que insertais tras “url” es la correcta, ya que si no no cargará. Si lo habeis hecho bien, el resultado debería ser el de la imagen de la derecha (click para verla más grande), en el que la página tiene como fondo la imagen de layout01.png que hemos visto antes repetida por toda la página, y gracias a su diseño queda como una imagen continua.
Al insertar el fondo vía CSS este aparecerá en todas las páginas que utilicen la hoja CSS que contiene esa orden. Lo más importante de hacerlo con este sistema es que si tenemos varios fondos en el mismo directorio, tan solo tenemos que cambiar el archivo de imagen que queremos que nos sirva de fondo en cada página y automáticamente ese cambio aparecerá reflejado en todas las páginas. Por ejemplo, si queremos que el background que se vea sea el layout02.png, haremos el siguiente cambio en la etiqueta body de nuestra hoja css:
body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/layout02.png);
background-color: #ffffff;
}
Y el resultado sería este (pulsa sobre la imagen para verla más grande):
Y si hicieramos la misma operación pero colocando el fondo número 3 con un código tal que este:
body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/layout03.png);
background-color: #ffffff;
}
El resultado sería este (pulsa sobre la imagen para verla más grande):
Espero que todo esto os haya servido de utilidad y os introduzca en el tema de los fondos o backgrounds de página, que da mucho más juego. A ver si posteo más adelante otra vez sobre este tema, que se pueden hacer cosas muy muy chulas probando cositas.
Rock & Ride!!!
