Página inicial  

trans_770 trans_160

Unidad 17. Estilos CSS Avanzado (IX)


Controles de fondo

 

En este apartado veremos las propiedades que pueden aplicarse sobre el fondo.

Estas propiedades se pueden aplicar sobre muchos de los elementos, tanto celdas, párrafos o el body de la página.

 

background-color permite establecer el color de fondo. Utiliza los mismos códigos hexadecimales o los nombres de color que vimos en la propiedad color del texto.

La sintaxis es igual a la que hemos visto hasta ahora:

td.rojo {

background-color: red;

}

 

background-image establece una imagen de fondo para el elemento.

body {

background-image: url(imagenes/fondo.jpg);

}

Por defecto, las imágenes se posicionarán en la esquina superior izquierda y en mosaico.

 

background-repeat indica el modo de repetición de la imagen establecida para el fondo.

Puede tomar los siguientes valores:

repeat: la imagen se repite a modo de mosaico hasta ocupar la página completa.

repeat-x: la imagen se repite a lo largo del eje horizontal.

repeat-y: la imagen se repite a lo largo del eje vertical.

no-repeat: la imagen no se repite.

Por omisión, el valor que se toma es repeat, por lo que se genera un mosaico con la imagen del fondo.

Deberás declarar la URL de la imagen para poder utilizar esta propiedad:

#menu {

background-image: url(imagenes/menu.gif);

background-repeat: repeat-x;

}

 

texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto

 

background-attachment se utiliza para indicar si la imagen de pantalla es fija o se desplaza con el movimiento de las barras de desplazamiento.

Esta opción se usa sobre todo para las imágenes del body.

Puede tomar los valores fixed y scroll. El primer valor dejará la imagen fija, el segundo hará que la imagen se desplace junto con las barras (como el fondo de esta página).

 

background-position permite el posicionamiento de la imagen de fondo.

Selecciona entre los valores top, center, bottom y left, center, right.

En este caso podremos combinar dos de los valores, por ejemplo:

.cita {

background-image: url(imagenes/quote.gif);

background-repeat: no-repeat;

background-position: right top;

}

Aunque puedes omitirlos, pero recuerda que si lo haces por omision los valores serán top y left.

 

Igual que en algunos de los apartados anteriores puedes utilizar la propiedad background para resumir las reglas CSS.

Así el siguiente bloque:

.cita {

background-color: gray;

background-image: url(imagenes/quote.gif);

background-repeat: no-repeat;

background-attachment: scroll;

background-position: right top;

}

Puede ser escrito de la siguiente forma:

.cita {

background: gray url(imagenes/quote.gif) no-repeat scroll right top;

}

Recuerda mantener el orden color, image, repeat, attachment y position.

Y ya sabes, si no quieres alguno, sáltatelo.

 

Para practicar realiza el Ejercicio Paso a Paso de Controles de Fondo.

 


  Ir a la página anterior Índice del curso  Ir a la siguiente página  

Pág. 17.9

Aviso legal: este curso es gratuito siempre que se visualice desde la página web de aulaClic. No está permitido descargar el curso y utilizarlo en academias o centros de enseñanza privados sin estar conectado a Internet.
© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Agosto - 2006.