Propiedades del fondo

Background-color

Con las siguientes reglas definimos el color de fondo para BODY, H1 y P.

BODY {background-color: #99ff99}
H1   {background-color: yellow }
P    {background-color: white }

 Ver 

Background-image

Con las siguientes reglas vamos a usar la primer imagen como fondo para BODY y la segunda imagen para el fondo de H1.

BODY {background-color: #FFCC33;
      background-image: url(bg-flecha.gif)
     }
H1   {background-image: url(bg-tile2.gif)
     }

 Ver 

La imagen de la flecha usada para BODY tiene zonas transparentes, de modo que el color de fondo de Body se ve a través de esas zonas transparentes. Si cambiamos el color de fondo obtenemos otro efecto:

BODY { background-color: #CCCCCC;
       background-image: url(bg-flecha.gif)
     }

 Ver 

Background-repeat

El valor inicial de "background-repeat" es "repeat" por eso en los ejemplos anteriores la imagen de fondo se repite en sentido horizontal y vertical formando un mosaico. Para que la imagen se repita solamente en sentido horizontal debemos usar:

BODY { background-color: #CCCCCC;
       background-image: url(bg-flecha.gif);
       background-repeat: repeat-x;
     }

 Ver 

Para que la imagen se repita solamente en sentido vertical debemos usar:

BODY { background-color: #CCCCCC;
       background-image: url(bg-flecha.gif);
       background-repeat: repeat-y;
     }

 Ver 

Finalmente, para que la imagen aparezca solamente una vez debemos usar:

BODY { background-color: #CCCCCC;
       background-image: url(bg-flecha.gif);
       background-repeat: no-repeat;
     }

 Ver 

Background-attachment

Habiendo especificado una imagen de fondo, podemos hacer que el mismo permanezca fijo cuando se efectúa un desplazamiento en la página:

BODY { background-color: #FFCC33;
       background-image: url(bg-flecha.gif);
       background-attachment: fixed;
     }

 Ver 

Con la siguiente regla hacemos que el fondo se desplace junto con el contenido del documento:

BODY { background-color: #FFCC33;
       background-image: url(bg-flecha.gif);
       background-attachment: scroll;
     }

 Ver