La propiedad CSS background te permite controlar el color de fondo de cualquier elemento, indicarlo como imagen, repitiendo la imagen de fondo verticalmente u horizontalmente y la posición de la imagen de fondo en la página.
Si deseamos indicar el fondo con un color, el código CSS sería este.
body {background-color: #00ff00}
En este ejemplo el elemento al que se le ha añadido color es el cuerpo de la página,pero puede ser cualquier otro elemento.
Para colocar la imagen de fondo sería así:
body {background-image: url('tuimagen.jpg') }
Se muestran una tabla con todas las propiedades y valores que puede haber con la propiedad background:
| Propiedad | Descripción | Valores | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| background | Propiedad “todo en uno” para aplicar todas las propiedades background en una sola declaración. | background-color background-image background-repeat background-attachment background-position |
4 | 1 | 6 | 1 |
| background-attachment |
Establece una imagen de fondo si se fija o se desplaza con el resto de la página.
|
scroll fixed |
4 | 1 | 6 | 1 |
| background-color | Establece el color de fondo de un elemento. | color-rgb color-hex color-name transparent |
4 | 1 | 4 | 1 |
| background-image | Establece una imagen como fondo | url(URL) none |
4 | 1 | 4 | 1 |
| background-position | Establece la posición de la imagen de fondo. | top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos |
4 | 1 | 6 | 1 |
| background-repeat | Establece si/como una imagen podrá ser repetida. | repeat repeat-x repeat-y no-repeat |
4 | 1 | 4 | 1 |
La columna W3C determina en qué versión de CSS la propiedad es definida (CSS1 o CSS2). Podemos ver algunos ejemplos:
Establecer el color de fondo
Este ejemplo demuestra cómo aplicar el color de fondo a un elemento.
Establecer una imagen como fondo
Este ejemplo demuestra cómo aplicar una imagen de fondo a un elemento.
Cómo repetir una imagen de fondo
Este ejemplo demuestra cómo repetir una imagen de fondo.
Cómo mostrar una imagen de fondo solo una vez
Este ejemplo demuestra cómo establecer una imagen de fondo una única vez.
Cómo colocar la imagen de fondo.How to place the background image
Este ejemplo demuestra cómo colocar la imagen de fondo en la página.
Cómo posicionar la imagen de fondo usando %
Este ejemplo demuestra cómo posicionar la imagen de fondo usando porcentajes.
Cómo posicionar la imagen de fondo mediante el uso de píxeles
Este ejemplo demuestra cómo posicionar la imagen de fondo usando píxeles
Como establecer una imagen de fondo fija
Este ejemplo demuestra cómo establecer una imagen de fondo fija. La imagen no hará scroll con el resto de la página.
Todas las propiedades de fondo en una declaración
Este ejemplo de muestra como usar la propiedad “todo en uno” para aplicar todas las propiedades background en una declaración.
Un consejo: ¡Logra crear armonía entre color del texto y el fondo para que el contenido pueda ser legible!
Vía | W3Schools
