.css">
3.2 Colores y fondos
Anterior   Siguiente
|  Introducción  |  Color del primer plano  |  Propiedades del fondo  |

Introducción

Las propiedades de CSS permiten a los autores especificar el color de primer plano de un elemento y también el color y el aspecto del fondo de un elemento.

Con las Hojas de Estilo, a diferencia del código HTML, cualquier elemento puede tener su propio color o imagen de fondo. Si la imagen no cubre todo el fondo se puede especificar su ubicación y el modo en que debe repetirse; también si el fondo debe quedar fijo o desplazarse junto con el documento.

 Volver 

Color del primer plano

'color'
Valores: <color> | inherit
Valor inicial: depende de la aplicación del usuario (navegador)
Se aplica a: todos los elementos
Se hereda?: si
Porcentajes: no admitidos

Esta propiedad describe el color del primer plano del contenido de texto de un elemento. Para especificar un color puede usarse cualquiera de los valores permitidos para color.

 Volver 

Propiedades del fondo

Background-color:

'background-color'
Valores: <color> | transparent | inherit
Valor inicial: transparent
Se aplica a: todos los elementos
Se hereda?: no
Porcentajes: no admitidos

Esta propiedad determina del color de fondo de un elemento, ya sea un valor de color o la palabra clave 'transparent', para hacer que los colores subyacentes se vean a través. Las propiedades del fondo no se heredan, pero el fondo de la caja padre por defecto se verá a través debido al valor inicial 'transparent' para 'background-color'.

 Ver ejemplo 

DIV { background-color: #FF0000 }

Background-image:

'background-image'
Valores: <uri> | none | inherit
Valor inicial: none
Se aplica a: todos los elementos
Se hereda?: no
Porcentajes: no admitidos

Esta propiedad determina la imagen de fondo de un elemento. Cuando se pone una imagen de fondo, se debe especificar también un color de fondo que será usado cuando la imagen no esté disponible. La imagen es procesada encima del color de fondo, de modo que el color es visible a través de las zonas transparentes de la imagen.

 Ver ejemplos 

BODY { background-image: url("imagen.gif") }

Background-repeat:

'background-repeat'
Valores: repeat | repeat-x | repeat-y | no-repeat | inherit
Valor inicial: repeat
Se aplica a: todos los elementos
Se hereda?: no
Porcentajes: no admitidos

Si se especifica una imagen de fondo, esta propiedad especifica si la imagen es repetida y de qué modo. Los valores tienen los siguientes significados:

repeat
La imagen es repetida tanto horizontal como verticalmente (mosaico)
repeat-x
La imagen es repetida sólo horizontalmente
repeat-y
La imagen es repetida sólo verticalmente
no-repeat
Sólo aparece una copia de la imagen, sin repetir

 Ver ejemplos 

BODY { background-image:  url("imagen.gif"); 
       background-repeat: repeat-y;
     }

Background-attachment:

'background-attachment'
Valores: scroll | fixed | inherit
Valor inicial: scroll
Se aplica a: todos los elementos
Se hereda?: no
Porcentajes: no admitidos

Si se especifica una imagen de fondo, esta propiedad especifica si permanece fija con respecto a la pantalla (fixed) o se desplaza junto con el documento (scroll).

 Ver ejemplos 

BODY { background-image:  url("imagen.gif"); 
       background-attachment: fixed;
     }

Background-position:

'background-position'
Valores: [ [<porcentaje> | <medida> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
Valor inicial: 0% 0%
Se aplica a: los elementos reemplazados y a nivel de bloque
Se hereda?: no
Porcentajes: referidos al tamaño de la propia caja

Si se ha especificado una imagen de fondo, esta propiedad define su posición inicial.

<porcentaje> <porcentaje>
Con un par de valores de '0% 0%' (por ejemplo), la esquina superior izquierda de la imagen es alineada con la esquina superior izquierda de la caja. Un par de valores de '100% 100%' coloca la esquina inferior derecha de la imagen en la esquina inferior derecha de la caja
<medida> <medida>
De igual modo que con los porcentajes, si se usan un par de valores de '2cm 2cm' (por ejemplo), la esquina superior izquierda de la imagen es ubicada 2cm a la derecha y 2cm abajo de la esquina superior izquierda de la caja
top left y left top
Igual '0% 0%'
top, top center y center top
Igual a '50% 0%'
right top y top right
Igual a '100% 0%'
left, left center y center left
Igual a '0% 50%'
center y center center
Igual a '50% 50%'
right, right center y center right
Igual a '100% 50%'
bottom left y left bottom
Igual a '0% 100%'
bottom, bottom center y center bottom
Igual a '50% 100%'
bottom right y right bottom
Igual a '100% 100%'

Si solamente se da un valor de porcentaje o de medida, éste determina la posición horizontal, la posición vertical será 50%. Si se dan dos valores, el primero es para la posición horizontal y el segundo para la posición vertical. La combinación de valores de medida y de porcentajes está permitida (ej., '50% 2cm'), y las posiciones negativas también están permitidas. Las palabras clave (top, left, center, etc.) no pueden ser combinadas con valores de porcentaje o de medida (todas las combinaciones posibles están dadas arriba).

 Ver ejemplos 

BODY { background-image:  url("imagen.gif"); 
       background-position: center top;
     }

Background:

'background'
Valores: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
Valor inicial: no definido para las propiedades resumidas
Se aplica a: todos los elementos
Se hereda?: no
Porcentajes: permitidos en 'background-position'

Esta es una propiedad resumida para fijar la propiedades individuales del fondo en un solo paso. Si se especifican solamente algunas de las propiedades individuales, para las ausentes se usa su valor inicial.

 Ver ejemplo 

BODY { background: red; }
DIV  { background: url("img.gif") #FFFFFF 50% repeat fixed; }

 Volver