Teoría
Teoría

Propiedad background

El fondo de un elemento puede establecerse mediante distintas propiedades: background-color, background-image, etc. Esto da lugar a una entrada bastante engorrosa.

También puede establecer el fondo utilizando la propiedad background abreviada, que enumera sus componentes mediante un espacio:

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

Si no se especifica ningún componente, se toma el valor por defecto. A continuación se muestran algunos ejemplos.

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

El primer ejemplo simplemente establece el color de fondo.

El segundo ejemplo establece una imagen de fondo no repetitiva, y por defecto un color de fondo transparente, situado en la esquina superior izquierda.

El tercer ejemplo establece la imagen de fondo y su ubicación, así como el color de fondo transparente por defecto y un modo de repetición general.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Propiedad background</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block block1"> Hipnosis gato </div> <div class="block block2"> Gato y 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

Establecer el fondo del primer bloque: color de fondo #e74c3c, imagen cat_eyes.png, sin repetición, posicionamiento de la imagen 10px a la izquierda y 5px arriba.
Establecer el fondo del segundo bloque: color de fondo #2980b9, imagen cat_fish.png, sin repetición, posicionamiento de la imagen 10px a la izquierda y 5px arriba.