Propiedad background-position

La propiedad background-position establece la ubicación de la imagen de fondo de un elemento. La ubicación se puede establecer utilizando cualquier unidad de tamaño. El primer valor denota el desplazamiento desde la izquierda, el segundo - el desplazamiento desde la parte superior.

También se puede establecer la posición usando palabras clave. En este caso, el orden de los valores no importa. Las palabras clave para la vertical: top, center, bottom. Las palabras clave para la horizontal: left, center, right.

Cómo usar las palabras clave

Para colocar una imagen usando palabras clave, se debe especificar un valor para la vertical y uno para la horizontal. Por ejemplo, si se especifica el valor top right, la imagen se colocará en la esquina superior derecha.

El orden de las palabras no importa: se puede escribir top right, o se puede escribir - right top. Si está la palabra clave center - se puede omitir. Por ejemplo, top center, es lo mismo que simplemente top. Y center center es lo mismo que simplemente center.

Sintaxis

selector {
	background-position: dos valores separados por un espacio;
}

Ejemplo

Por defecto, la imagen de fondo estará en la esquina superior izquierda:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ejemplo

Coloquemos la imagen de fondo en la esquina superior derecha:

<div id="elem"></div>

#elem {
	background-position: top right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ejemplo

Coloquemos la imagen de fondo en la esquina inferior derecha:

<div id="elem"></div>

#elem {
	background-position: bottom right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ejemplo

Coloquemos la imagen de fondo a la derecha y centrada verticalmente:

<div id="elem"></div>

#elem {
	background-position: right center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ejemplo

Coloquemos la imagen de fondo en el centro del bloque:

<div id="elem"></div>

#elem {
	background-position: center center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ejemplo

Coloquemos la imagen de fondo a una distancia de 20px desde la izquierda y 40px desde la parte superior:

<div id="elem"></div>

#elem {
	background-position: 20px 40px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ejemplo

Coloquemos la imagen de fondo a una distancia de 90% desde la izquierda y 100% desde la parte superior:

<div id="elem"></div>

#elem {
	background-position: 90% 100%;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ejemplo

Coloquemos la imagen de fondo a una distancia de 30px desde la izquierda y en la parte inferior verticalmente:

<div id="elem"></div>

#elem {
	background-position: 30px bottom;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ejemplo

Coloquemos la imagen de fondo a una distancia de 30px desde la izquierda y centrada verticalmente:

<div id="elem"></div>

#elem {
	background-position: 30px center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ejemplo

Coloquemos la imagen de fondo a una distancia de 30px desde la parte superior y centrada horizontalmente:

<div id="elem"></div>

#elem {
	background-position: center 30px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ver también

la propiedad background,
que es una propiedad abreviada para el fondo