Propiedad:
Uso:
background-position: center | top | bottom | top left | top center | top right | bottom left | bottom center | bottom right ;
background-position: 50% 50%;
background-position: 200 200;
Definición:
Esta etiqueta establece la posición de la imagen de fondo. La repetición debe ser del tipo no-repeat para que el efecto sea el adecuado.
Toma los siguientes valores:
a)center | top center | ... : Estos valores definen en palabras donde debe ir la imagen. Puede venir dado por "arriba centrado" o "arriba a la izquierda" o "arriba a la derecha"
b)50% 50% : Los valores pueden estar dados en porcentajes como 50% 60%. Esto significa que la imagen deberá establecerse en la posición al 50% de la izquierda y al 60% de arriba.
c)200 200 : Los valores pueden darse en píxeles.
Todo estos valores se tomarán respecto al área objeto. Si pones estos valores dentro de una etiqueta div. El área 50 significa 50 desde el comienzo de la etiqueta div.
Ejemplo 1:
<div style="background-image: url('test3.jpg'); background-color: green; background-repeat: no-repeat; background-position: bottom center;">nombre del color <br><br><br></div>
Resultado:
nombre del color
Ejemplo 2:
<div style="background-image: url('test3.jpg'); background-color: green; background-repeat: no-repeat; background-position: 50% 50%;"> nombre del color
<br><br><br></div>
Resultado:
nombre del color
Ejemplo 3:
<div style="background-image: url('test3.jpg'); background-color: green; background-repeat: no-repeat; background-position: 50 50;"> nombre del color
<br><br><br></body>
Resultado:
nombre del color
| 
