Teoría
Teoría

La propiedad background-position

La propiedad background-position controla la posición de la imagen de fondo. Su valor tiene dos partes separadas por un espacio: x y.

x define la posición horizontal y y la vertical.

Para x se pueden usar las palabras clave left, center, right, además de valores en porcentajes y en píxeles.

Para y se pueden usar las palabras clave top, center, bottom, además de valores en porcentajes y en píxeles.

Aquí tienen algunos ejemplos:

background-position: 50% 50%;
background-position: right bottom;
background-position: 50px 100px;
background-position: 0 100%;
background-position: left bottom;

Así funciona cada ejemplo:

la imagen quedará centrada;
se alineará en la esquina inferior derecha;
tendrá un desplazamiento de 50px desde la izquierda y 100px desde arriba;
se ubicará en la esquina inferior izquierda;
también se ubicará en la esquina inferior izquierda.

index.html
style.css

HTML

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

CSS

body { padding: 10px; text-align: center; } .block { display: inline-block; width: 192px; height: 192px; margin: 5px; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { background-color: #2ecc71; background-image: url("cat_box.png"); background-repeat: no-repeat; } .block2 { background-color: #3498db; background-image: url("cat_fish.png"); background-repeat: no-repeat; } .block3 { background-color: #e74c3c; background-image: url("cat_drunk.png"); background-repeat: no-repeat; } .block4 { background-color: #e67e22; background-image: url("cat_tied.png"); background-repeat: no-repeat; }

ObjetivosRealizado

Definan la posición del fondo para cada bloque:

50% 50% en el primer bloque,
100% 0 en el segundo bloque,
0 100% en el tercer bloque,
100% 100% en el cuarto bloque.