Colores y fondos

| 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

3.2 Colores y fondos
	Anterior		Siguiente