sábado, 8 de octubre de 2011

Fondos en CSS


Con CSS se puede personalizar el fondo de cada objeto de nuestra página, permitiendonos escojer el color de fondo, una imagen, la posición de la imagen, el comportamiento, y las repeticiones de la misma... 

El color de fondo El color de fondo se define usando el atributo background-color y un color RGB cómo valor.
 
background-color: #ff0000; 
 
 
La imagen de fondo 
Podemos definir un objeto con una imagen de fondo usando el atributo background-image y cómo valor una forma del estilo url(imagen.jpg), por ejemplo:
 
background-image: url(imagen.gif); 
 
 
La posición del fondo 
La imagen de fondo se puede aliniar a la parte superior, inferior.., para esto usaremos el atributo background-position, indicando uno o mas de los siguientes valores:
top - Aliniar en la parte superior 
bottom - Aliniar en la parte inferior 
center - Aliniar en el medio 
left - Aliniar a la izquierda 
right - Aliniar a la derecha 
Vamos a ver un ejemplo de imagen de fondo aliniada en la parte superior derecha:
 
background-position: top right; 
 
 
El comportamiento 
El comportamiento de la imagen de fondo cuando usamos las barras de desplazamiento también se puede definir con el atributo background-attachment, que puede ser:
scroll - La imagen se mueve con el interior del objeto 
fixed - La imagen no se mueve 
Podemos hacer que el fondo no se desplace al desplazar la página:
 
background-attachment: fixed; 
 
 
Las repeticiones 
Podemos hacer que la imagen de fondo se repita usando el atributo background-repeat:
repeat - La imagen se repite vertical y horizontalmente 
repeat-x - La imagen se repite horizontalmente 
repeat-y - La imagen se repite verticalmente 
no-repeat - La imagen no se repite
Podemos hacer que el fondo no se desplace al desplazar la página:
 
background-attachment: fixed; 
 
 
El atributo background 
El atributo background es una mezcla de los cinco anteriores y nos permite usar todos sus posibles valores para definir un fondo rapidamente:
 
background: #ff0000 url(imagen.gif) repeat-x top fixed; 
 

No hay comentarios:

Publicar un comentario