Fondos (CSS)

Con CSS se puede personalizar los fondos 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... 

Tabla de contenido

• · El color de fondo
• · La imagen de fondo
• · La posición del fondo
• · El comportamiento
• · Las repeticiones
• · El atributo background

El color de fondo

El color de fondo se define usando el atributo background-color y un color RGB cómo valor.

000	<div style="background-color: #ff0000;">ejemplo</div>  Maximizar   Seleccionar   CSS,XML

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:

000	<div style="background-image: url(imagen.gif);">ejemplo</div>  Maximizar   Seleccionar   CSS,XML

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 alineada en la parte superior derecha:

000	<div style="background-position: top right;">ejemplo</div>  Maximizar   Seleccionar   CSS,XML

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:

000	<body style="background-image: url(bg_BG.gif); background-attachment: fixed">  Maximizar   Seleccionar   CSS,XML

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 repita en la página:

000	<body style="background-image: url(bg_BG.gif); background-repeat:no-repeat">  Maximizar   Seleccionar   CSS,XML

El atributo background

El atributo background es una mezcla de los cinco anteriores y nos permite usar todos sus posibles valores para definir los fondos de los elementos rapidamente:

000	<body style="background: #ff0000 url(imagen.gif) repeat-x top fixed;">ejemplo</body>  Maximizar   Seleccionar   CSS,XML