a propiedad 'background-color'
La propiedad background-color describe el color de fondo de los elementos.
El elemento  contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedadbackground-color debería aplicarse al elemento .
También se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y altexto. En el ejemplo que sigue se aplicarán diferentes colores a los elementos  y 

.

body {
background-color: #FFCC66;
}

h1 {
color: #990000;
background-color: #FC9804;
}

Ver ejemplo
Fíjate cómo hemos aplicado dos propiedades a 

 separándolas por medio de un punto y coma.
Imágenes de fondo [background-image]
La propiedad CSS background-image se usa para insertar una imagende fondo.
Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves más abajo. Puedes descargar la imagen para usarla en tu propio ordenador (haz clic con el botón derecho sobre la imagen y elige "guardar imagen como..."), o bien puedes usar cualquier otra imagen.

Para insertar la imagen de la mariposa como imagen de fondo de una página web, aplica sencillamente lapropiedad background-image al elemento y especifica la localización de la imagen.

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}

h1 {
color: #990000;
background-color: #FC9804;
}

Ver ejemplo
NOTA: Fíjate cómo hemos especificado la localización de la imagen: url("butterfly.gif"). Esto significa que la imagen está en la misma carpeta que la hoja de estilo. Tambiénpuedes hacer referencia a imágenes en otras carpetas usando url("../imagenes/butterfly.gif") o incluso imágenes de internet si indicas la dirección completa del fichero: url("http://www.html.net/butterfly.gif").
Repetir la imagen de fondo [background-repeat]
En el ejemplo anterior, ¿te fijaste en que, por defecto, la mariposa se repetía tanto en el eje horizontal como en el vertical para ocupar todala pantalla? La propiedad background-repeat controla este comportamiento.
La tabla siguiente resume los cuatro valores diferentes para la propiedad background-repeat.
Valor
Descripción
Ejemplo
Background-repeat: repeat-x
La imagen se repite en el eje horizontal
Ver ejemplo
background-repeat: repeat-y
La imagen se repite en el eje vertical
Ver /ejemplo
background-repeat: repeat
La imagen se repiteen el eje horizontal y vertical
Ver ejemplo
background-repeat: no-repeat
La imagen no se repite
Ver ejemplo
Por ejemplo, para evitar que se repita un imagen de fondo, el código que tendríamos que usar sería el siguiente:

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}

h1 {
color: #990000;
background-color: #FC9804;
}

Verejemplo
Fijar la imagen de fondo [background-attachment]
La propiedad background-attachment especifica si una imagen está fija o se desplaza con el elemento contenedor.
Una imagen de fondo fija no se moverá con el texto cuando el lector se desplace por la página, mientras que una imagen de fondo no fija se desplazará con el texto de la página web.
La tabla siguiente resume los dos valores posiblespara la propiedad background-attachment. Haz clic en los ejemplos para ver la diferencia entre la imagen fija y la imagen que se desplaza.
Valor
Descripción
Ejemplo
Background-attachment: scroll
La imagen se desplaza con la página - no está fija
Ver ejemplo
Background-attachment: fixed
La imagen está fija
Ver ejemplo
Por ejemplo, el siguiente código fijará la imagen de fondo.

body {background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}

h1 {
color: #990000;
background-color: #FC9804;
}

Ver ejemplo
Ubicación de la imagen de fondo [background-position]
Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. La propiedad background-position te permitirá...

Leer documento completo

Regístrate para leer el documento completo.