Explicando el color y la imagen de fondo de una página web

Aunque podemos indicar un color y/o un fondo de página directamente en el código Html, vamos a hacerlo en la Hoja de Estilos para evitar los problemas y aprovechar las ventajas que te he comentado en la página anterior. Así de paso, vamos a prendiendo a usar el archivo estilos.css para definir las características de las página web.

Color de fondo

Por defecto, el color de fondo de una página web es el blanco. Si queremos cualquier otro tenemos que indicarlo. El elemento al que tenemos que decir que tiene que tener el color que queramos es el Body, pues engloba a todo "lo que se ve" de la página web. Los colores se definen por un código muy raro (como por ejemplo #E6E6FA). Te dejo aquí un enlace con una lista de colores y sus códigos que te puede venir muy bien. Escoge uno que te guste para el fondo y seguimos. Recuerda que tienes algunos otros enlaces interesantes sobre colores y sus códigos en el apartado Consejos e Ideas de CCTW.

Para indicar el color deseado, abrimos el Html-Kit, activamos la ventana Workspace y abrimos la Hoja de Estilos creada antes. Escribe en ella este código:

body {background-color: #E6E6FA}

En adelante, cuando escriba códigos de CSS los pondré en color verde para distinguirlos del código Html que lo pondré de color azul. oki? (Cómo crees que hago esto? je je je, pues sí, con estilos CSS..)

Si ahora guardas el archivo estilos.css, abres el index.html y pulsas abajo en "Preview" para ver como queda, verás como el fondo ahora es del color elegido. Bien, no? Y verás que no hemos tocado el index.html para nada. Si en lugar de solo el index tuvieramos 500 páginas pasaría lo mismo, todas cambiarian con solo retocar el archivo estilos.css y en cambio si no usaramos Hoja de Estilos tendríamos que cambiar el color de fondo en las 500 páginas, una a una, a mano!!... es un buen invento o no? Pues aún hay webmasters que no lo saben usar... vaya tela.

Un poco de estilos CSS

Ya de paso te explico un poco de estilos css. Para dar propiedades a los elementos de la web, se escribe en la hoja de estilos el nombre de la etiqueta y a continuación, encerrado entre los corchetes "{" y "}" se define cada propiedad que queremos pero separándo unas de otras con un punto y coma ";". En el caso anterior, como la propiedad era para el cuerpo, hemos escrito "body" y entre corchetes hemos definido la propiedad. Background que significa fondo. background-color se usa para especificar el color de fondo no solo del body sino de otros muchos elementos, como párrafos, enlaces, etc,. Ese número raro, el #E6E6FA es el código que corresponde a uno de los colores que aparecian en la tabla de colores del enlace que te puse antes. En este caso, como solo hemos definido una propiedad, no es necesario poner el punto y coma, pues no hay nada que separar. Te parece muy raro todo esto? No te preocupes, pronto te será familiar y lo harás con los ojos cerrados... bueno con uno un poco abierto sale mejor.. je je.

Imagen de fondo

La imagen de fondo se define de forma similar al color de fondo. Primero vamos a escoger una imagen que nos guste. Tienes un montón en la Galería de Imágenes, pero puedes colocar cualquiera que tengas a mano. Cuando la tengas, copiala y la pegas en la carpeta "objetos" que hemos creado lecciones atrás en tu escritorio, dentro de la carpeta "web-ejemplo-cctw" que hay en la carpeta "mis-paginas-web", y una vez copiada allí le cambias el nombre y le pones "fondo.png".

Suponiendo que le hemos puesto de nombre fondo.png el código a insertar en la hoja de estilos sería este:

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

Fíjate como hemos separado la propiedad color de fondo de la propiedad imagen de fondo con un punto y coma, tal y como te comenté antes.

Explicando el Background-Image

En este caso la propiedad se llama background-image y sirve para indicar el archivo de imagen de fondo que ha de tener la web. La ruta del archivo de imagen se escribe entre los paréntesis tal y como hemos visto en el código. Por defecto, es decir, si no decimos lo contrario, esta imagen de fondo se repetirá horizontal y verticalmente para ocupar todo el fondo de la página, como formando un mosaico.

Se puede hacer que no se repita, que se repita solo horizontalmente, o solo verticalmente e incluso que no se repita y colocarlo en el centro, o en la parte baja o a la derecha.... En cambio no es posible conseguir que solo salga una vez y que a la vez se expanda ocupando toda la página. Vamos a ver todas esas opciones.

Background-Repeat

Para que el fondo solo salga una vez hay que decirle, en la misma línea de la hoja de estilo que no se repita, de este modo: background-repeat:no-repeat quedando así el código de la Hoja de Estilos:

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

Para que el fondo se repita solo horizontalmente, se pone esto en su lugar: background-repeat:repeat-x

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

Para que se repita solo verticalmente se escribe: background-repeat:repeat-y

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

Para que se repita vertical y horizontalmente no hace falta poner nada, pero si lo deseas puedes poner esto: background-repeat:repeat, tal que así:

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

Aún hay otro valor posible que podemos dar. Se trata del valor "inherit" que significa algo así como fondo anclado. Significa que aunque movamos la web el fondo quedaría fijo y solo se desplaza el contenido, no el fondo. Eso si, no funciona en todos los navegadores, tenlo en cuenta si lo aplicas.

Background-Position

También puedes elegir que el fondo aparezca arriba y centrado, abajo a la izquierda y todas estas combinaciones con la propiedad background-position. Te dejo un ejemplo para que lo pruebes y veas como funciona:

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

Los valores que puede tomar son: top (arriba), center (centrado) y bottom (abajo) para la alineación vertical; y left (izquierda) center (centro) y right (derecha) para la alineación horizontal, de modo que puedes usar cualquiera de esas combinaciones.

Aunque no se recomienda, también puedes usar distancias, es decir, indicarle que se posicione a 50 pixeles desde la derecha y 100 pixeles desde arriba, así: background-position: 50px 100px. Un pixel es una medida de distancia y equivale a un puntito de tu monitor. Si te acercas mucho mucho a tu monitor, casi pegando las narices a él, verás que todo está hecho con puntitos. Pues cada uno de esos es un pixel. Para hacerte una idea, estas letras que lees deben tener unos 10 pixeles de ancho cada letra. Una página web suele tener una achura de 800 pixeles.

Background-Attachment

Esto no funciona en todos los navegadores y hace que la imagen de fondo se quede fija mientras mueves la página con la barra de desplazamiento o que se mueva con ella. Los valores a tomar son fixed o scroll. Pero no te lo recomiendo por que depende del navegador conseguiras el efecto o no.

Nota:

Realmente, si definimos una imagen de fondo no es necesario el color de fondo. Puede estar bien por si el archivo de la imagen de fondo no se cargara, pero si estamos seguros de que está bien podemos eliminar la propiedad background-color de la línea de la hoja de estilos, no crees? Pues a no ser que la imagen no ocupe toda la página, la imagen tapará el color de fondo. En cambio si la imagen solo ocupa una parte si puede ser interesante colocar el color de fondo. Eso queda ya a tu criterio.