Unidad 17. Estilos CSS Avanzados (XII)

17.12. 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, capas,el body de la página, etc.

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. Si la imagen tiene zonas transparentes, se verá el color de fondo detrás de ella.

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

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

 Cursos Informática Gratuitos