Teoría
Teoría

La propiedad background

El fondo de un elemento se puede definir con propiedades separadas: background-color, background-image y otras más. Pero eso puede hacer que el código se vuelva bastante largo.

También se puede definir con la propiedad abreviada background, donde sus componentes se escriben separados por espacios:

background: [bc] [bi] [br] [bp] [ba];
/* Significado:
[bc] — background-color
[bi] — background-image
[br] — background-repeat
[bp] — background-position
[ba] — background-attachment
*/

Si algún componente no se indica, se usará su valor predeterminado. Aquí van algunos ejemplos.

background: #e74c3c;
background: url("img.png") no-repeat;
background: url("img.png") 10px 20px;

En el primer ejemplo solo se define el color de fondo.

En el segundo se define una imagen de fondo que no se repite; además, se usan los valores predeterminados para el color transparente y la posición en la esquina superior izquierda.

En el tercero se define la imagen de fondo y su posición; el color sigue siendo transparente por defecto y la repetición queda activa en todas las direcciones.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La propiedad background</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block block1"> Gato hipnótico </div> <div class="block block2"> Gato pez </div> </body> </html>

CSS

body { padding: 20px; font-size: 20px; font-family: "Tahoma", sans-serif; } .block { width: 140px; margin: 25px auto; padding: 25px 0; padding-left: 90px; color: white; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { background: none; } .block2 { background: none; }

ObjetivosRealizado

Definan este fondo para el primer bloque: color #e74c3c, imagen cat_eyes.png, sin repetición y con posición a 10px de la izquierda y 5px de arriba.
Definan este fondo para el segundo bloque: color #2980b9, imagen cat_fish.png, sin repetición y con posición a 10px de la izquierda y 5px de arriba.