|
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;
|
Eloi de San Martín
http://www.programacionweb.net/articulos/articulo/?num=322
|
Lista de Códigos CSS 
