Cómo utilizar el fondo Posición de la propiedad en CSS

El propósito de la propiedad-posición de fondo es para ajustar la posición de la imagen de un fondo. Este artículo se explican los distintos valores que se aplican a la propiedad background-position.

Instrucciones

1 Si no hay ningún background-position lleva el nombre, la posición por defecto está en la posición superior izquierda del elemento.

2 Un valor puede ser asignado a esta propiedad, ya sea como una longitud, un porcentaje o el uso de palabras clave específicas.

3 Un valor de longitud coloca la imagen de fondo en la posición horizontal y vertical exacta con nombre. Un valor de un solo tramo, por ejemplo:

ejemplo {

background-position: 200px;

}

representa tanto una posición horizontal 200 píxeles desde la izquierda y en posición vertical 200 píxeles desde la parte superior.

4 Dos valores, representan la horizontal y vertical, por ejemplo:

ejemplo {

background-position: 100px 200px;

}

5 La posición puede ser dado usando las siguientes palabras clave para posiciones horizontales: izquierda, centro, derecha. Para las posiciones verticales, se permite que estas palabras clave: superior, central inferior. Por ejemplo:

ejemplo {

background-position: left center;

}

6 Los valores porcentuales colocar una imagen en una posición relacionada tanto con el elemento que se da una imagen de fondo y la propia imagen real. Por ejemplo:

ejemplo {

background-position: 30% 50%;

}

coloca la imagen a 30% del ancho de la imagen y 50% de la altura de la imagen en una posición 30% de la izquierda y 50% a partir de la parte superior del elemento contenedor.

7 Ciertos valores porcentuales se ajustan a las palabras clave:
0% = izquierda o la parte superior
50% = centro
100% = derecha o inferior
Por ejemplo background-position: izquierda arriba;
es el mismo que background-position: 0% 0%;

8 Se permiten valores de longitud y porcentuales negativos. Esto puede mover la posición de algunos o todos de los antecedentes-imagen, fuera de los límites del elemento contenedor. La parte fuera de los límites del elemento que contiene no sería visible. En un cambio creado por el usuario, tal vez se cierne sobre un enlace, la parte oculta de la imagen de fondo puede ser revelado cambiando el fondo, la posición de la imagen de fondo.