Blog ElCodiguero
31 Dec 2009 CSS

Propiedades de fondo en CSS

Con CSS se puede especificar el fondo de un elemento cualquiera, y sus propiedades. Se puede especificar el color, la imagen que se usará, si esta imagen debe repetirse o no, y dónde debe ubicarse.

background-image : url(ruta a la imagen);

La imagen que se usará como fondo. Casi todos los navegadores actuales (excepto IE <= 8) soportan múltiples imágenes de fondo, que se superponen según sea necesario. Es decir, se puede colocar una imagen de fondo arriba a la derecha, otra abajo a la izquierda, y otra que se repita en toda la página. La posibilidad de especificar múltiples imágenes de fondo para un mismo elemento es parte de CSS 3.

background-repeat : repeat | no-repeat | repeat-x | repeat-y

Especifica si la imagen debe repetirse tanto vertical como horizontalmente.

background-color : rgb(XXX,YYY,ZZZ) | #XXYYZZ | color

Especifica el color del fondo.

background-attachment : scroll | fixed

Especifica si la imagen de fondo debe desplazarse o no con el texto (scroll la deja moverse, fixed la deja fija).

background-position: posVertical posHorizontal

Especifica la posición en la que se ubica la imagen de fondo. La forma más fácil de especificarla es usando las palabras top (arriba), left (izquierda), right (derecha) y bottom (abajo). También pueden especificarse porcentajes, por ejemplo un valor de 15% 30% ubicará la imagen de fondo (su esquina superior izquierda) con un margen izquierdo de 15% del ancho de la página, y un margen superior de 30% de la altura de la página. Otros valores más usuales son, por ejemplo top left, o bottom right.

background

La forma corta, personalmente me parece difícil de recordar y más compleja que usar las propiedades largas, pero existe. Sirve para especificar todas las propiedades del fondo en una sola línea:

background: background-color || background-image || background-repeat || background-attachment || background-position

No es necesario especificar todas las propiedades, lo siguiente es perfectamente válido:

background: white url(fondo.png);

Y tampoco es necesario especificar las propiedades en el orden mostrado, lo siguiente también es válido (ejemplo mostrado en el sitio del W3C):

background: url("chess.png") gray 50% repeat fixed

Enlaces relacionados

Activa Javascript para para cargar los comentarios, basados en DISQUS

El Blog de ElCodiguero funciona sobre Pelican

Inicio | Blog | Acerca de