Diseñar fondos de página (backgrounds) y utilizarlos con CSS

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…

Fondos hechos con BgMaker y ampliados el 600% para apreciar detalle.

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

Ejemplo de una página con el fondo número 1 en su CSS.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):

Ejemplo con el fondo numero 2 insertado en la hoja CSS

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

El layout 3 con css

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!!!

Comentarios

Hooola!
Muchachas !

LAAAAAAAAAAS AMOOOOOOOOOOOOOO! (L)
=)

hola

Holas, entendi tu explicacion, esta muy bien detallado. Yo quisiera hacer una pregunta, como puedo hacer lo mismo pero con la opcion de que el USUARIO de nuestra web escoja el color de fondo, como podria hacer eso?
por ejemplo, tenemos 3 botones, si hacen click boton 1, carga fondo 1 y asi sucesivamente con los otros botones y fondos.
gracias

bueno para hacer eso tienes ke darle acciones a tus botones que cargue el css que kieras , habria ke programarlo

Como puedo hacer para que en vez de que sea la repetición de una forma geometrica sea una imagen?
Por ejemplo una de Twilight que es de lo que va mi Blog, y que sea como una marca al agua para poder hacer que se vea de fondo si que quede desprolijo?

Besitos…

PD:
me pasarian por msn la rta o el URL del post cuando lo hagas… =)

Chausis

Jose, creo que la mnejor solución es hacer 3 páginas exactamente iguales y confiar que el otro tenga una buena conexión xP

muchas gracias me fue de gran ayuda, y me sacó de un aprieto que tenia ! : ]!!!

Oye nesesito ayuda porfavor mi pagima es felyxxsoldier.es.tl y estaba muy padre y lo que pasa es que cuando puse una vez guardar salio esto:
¡Atención: ha cambiado el color de fondo via css, por favor procure que se siga viendo la publicidad!
y se ve mi pagina blanca porfavor ayudame te lo agradeseria mucho buenos salu2

Excelente tutorial, me ha permitido generar mis propios fondos e ir cambiando el color de la fuente a fin de que contraste con la imágen o patterns de fondo.

Por cierto encontre esta web y ayuda con los colores:

http://html-color-codes.info/codigos-de-colores-hexadecimales/

Espero les sirva

Comentar

*Campos obligatorios

No te pierdas

Foto de la sesión de trabajo con Rusticae
19 abril, 2015
Rediseñando Rusticae, capítulo I: hablando se entiende la gente
Desde hace unos meses, en Flat 101 trabajamos con Rusticae, elegido por el ministerio de Industria como mejor sitio web de turismo y viajes en 2014, en la mejora de...
No Image
25 mayo, 2014
UX Spain 2014 en Granada. Resumen, crónica y vivencias granadinas
Por tercera edición consecutiva se celebraba, en esta ocasión en Granada, el UX Spain, el encuentro de profesionales de experiencia de usuario. Y por tercera vez, para allá que me...
No Image
1 julio, 2013
Diseño web: del concepto al resultado. Creatividad, honestidad y belleza al servicio de los objetivos de negocio de un site
Los pasados días 21 y 22 de junio (viernes y sábado) se celebro el primer congreso SEonthebeach en La Manga del Mar Menor. Entre otras muchas particularidades, este congreso se...

Si continuas utilizando este sitio aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar