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
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
40 plantillas CSS y XHTML gratis y de alta calidad »
28 tutoriales de poderosos efectos de luz con Photoshop »
100 bonitas y variadas texturas gratis »
104 tipografías gratis para diseñar sitios y logotipos »
Pack de +100.000 tipografías gratis »
Hoja de ayuda sobre la especificidad CSS »
Los 50 mejores iconos del 2008 »
Varios logotipos interesantes creados con CSS »
Excelentes diseños de logos minimalistas »
Speaky (4)
Erik (3)
Gustavo (3)
Marco (3)
@chifliiiii (2)
beastieux (2)
Boda (2)
drakkar (2)
Gil Peñaloza (2)
niconectado (2)
. My recent post Pack de 100000 tipografías...
Por ahora hay 2 comentarios ¿Quieres opinar?
excelente blog,estoy empezando en css con la ayuda de librosweb.es.Aproposito que hablas de tablas de propiedades,te sugiero una que me parece excelente:
http://www.allwebdesignresources.com/webdesignblogs/graphics/30-css-cheat-sheets-quick-reference-guides/
gracias por tu trabajo,muy bueno
@luis ya incluimos varias hojas de referencia para CSS hace poco: http://www.cssblog.es/tags/hojas-referencia-css/
Un saludo.