Aplicando color e imagen de fondo a nuestro ejemplo

Ups, creo que en la página de antes me he pasado un poco escribiendo. Espero no haberte asustado, je je je. Solo acuérdate de que ahí hay información de los fondos por si algún día te hace falta. Vamos ahora a aplicar un color de fondo a la web de nuestro ejemplo.

Aplicando el color de fondo

Tal y como hemos visto antes, para aplicar el color de fondo #E6E6FA a la página web pondremos a la etiqueta body de nuestra hoja de estilo lo siguiente (ya sabes, abres el Html-Kit y abres la hoja de estilo para insertarle esta línea):

body {background-color: #E6E6FA}

Aplicando una imagen de fondo

Suponiendo que hemos escogido esta imagen para el fondo de la web (lo se, es horrible, pero para el ejemplo sirve, no?):

(Para guardártela, pon el ratón sobre ella, haz clic derecho y escoge guardar como. Luego la guardas en la carpeta "objetos".)

y suponiendo que la hemos guardado en la carpeta "objetos" y que la hemos llamado "fondo.png", abrimos la hoja de estilo y dejamos la línea de antes así:

body {background-color:#E6E6FA ; background-image:url(objetos/fondo.png);}

Como no quiero que se repita, le pongo tambien esto:

body {background-color:#E6E6FA; background-image:url(objetos/fondo.png); background-repeat:no-repeat ;}

Además la quiero centrada tanto vertical como horizontalmente, así que le añado esto:

body {background-color:#E6E6FA; background-image:url(objetos/fondo.png);
background-repeat:no-repeat; background-position:center center;}

En otros navegadores no pasa nada, pero en Firefox es necesario especificar la altura del body para que el fondo salga centrado verticalmente. Para conseguirlo solo hemos de indicar en esa misma línea que el body va a tener una altura del 100%, esto es... que va a ocupar lo que tenga que ocupar. Una chorrada, lo se, pero si no el Firefox no se lo traga, de modo que lo ponemos y listo, perfecto:

body {background-color:#E6E6FA; background-image:url(objetos/fondo.png);
background-position:center center; background-repeat:no-repeat; height:100%;;}

A veces hay que buscar el truco para que se vea bien en cualquier navegador y la mayoria de veces es un calentamiento de cabeza tremendo, pero tú tienes la suerte de contar con CCTW, je je je.

La página de ejemplo, tras guardar la hoja de estilo, se vería así con cualquier navegador (espero...):