Propiedad CSS background-position-x
La propiedad CSS background-position-x especifica la posición horizontal de una imagen de fondo. Consulta la sintaxis y practica con ejemplos.
La propiedad background-position-x establece la posición horizontal (eje x) de una imagen de fondo dentro de su elemento. Es la contraparte de background-position-y, que controla la posición vertical. Juntas forman la versión en forma extendida del atajo background-position.
De forma predeterminada, una background-image se posiciona en la esquina superior izquierda del elemento y, a menos que se modifique background-repeat, se repite en mosaico por todo el elemento. Configurar background-position-x te permite desplazar la imagen hacia la izquierda o la derecha sin afectar su posición vertical.
Cuando un elemento tiene más de una imagen de fondo, puedes asignar a background-position-x una lista separada por comas — un valor por capa, en el mismo orden en que se listan las imágenes:
/* two background layers, each positioned independently on the x-axis */
background-position-x: left, 20%;Esta página cubre la sintaxis, todos los valores aceptados, cómo se miden los porcentajes y las longitudes, y ejemplos funcionales que puedes ejecutar.
Nota
En CSS moderno suele ser más claro usar el atajo
background-position, que establece ambos ejes a la vez.background-position-xes más útil cuando deseas animar o sobrescribir solo el eje horizontal y dejar la posición vertical intacta.
Los valores negativos son válidos — background-position-x: -30px desplaza la imagen fuera del borde izquierdo.
| Valor inicial | left |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.backgroundPositionX = "right"; |
Sintaxis
Valores de CSS background-position-x
background-position-x: left | center | right | length | percentage | initial | inherit;Ejemplo de la propiedad background-position-x:
Ejemplo de código CSS background-position-x
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: 70%;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Resultado
Ejemplo de la propiedad background-position-x con el valor "center":
Ejemplo de CSS background-position-x con center
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-x;
background-position-x: center;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Ejemplo de la propiedad background-position-x con el valor "left":
Ejemplo de CSS background-position-x con left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: left;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Ejemplo de la propiedad background-position-x con el valor "length":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: 30px;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Cómo se miden los porcentajes y las longitudes
Una fuente común de confusión es la diferencia entre porcentajes y longitudes:
- Una longitud (
30px,2rem) desplaza el borde izquierdo de la imagen desde el borde izquierdo del área de posicionamiento esa cantidad. - Un porcentaje alinea el mismo punto relativo de la imagen con el mismo punto relativo del área. Así,
0%alinea los bordes izquierdos,100%alinea los bordes derechos y50%centra la imagen. Por eso un porcentaje mayor que0%no simplemente desplaza la imagen "ese porcentaje del ancho" — interpola entre los dos bordes.
Las palabras clave son atajos de estos porcentajes: left = 0%, center = 50% y right = 100%.
Valores
| Valor | Descripción |
|---|---|
| left | Especifica la alineación del borde izquierdo de la imagen de fondo con el borde izquierdo de la capa de posición del fondo. |
| center | Especifica la alineación del centro de la imagen de fondo con el centro de la capa de posición del fondo. |
| right | Especifica la alineación del borde derecho de la imagen de fondo con el borde derecho de la capa de posición del fondo. |
| length | Un desplazamiento fijo (por ejemplo 30px o 2rem) del borde izquierdo de la imagen desde el borde izquierdo del área de posicionamiento. Se permiten longitudes negativas y mueven la imagen fuera del lado izquierdo. |
| percentage | Especifica el desplazamiento de la posición horizontal de la imagen de fondo relativo al contenedor. 0% alinea el borde izquierdo de la imagen de fondo con el borde izquierdo del contenedor, 100% alinea el borde derecho de la imagen de fondo con el borde derecho del contenedor, y 50% centra horizontalmente la imagen de fondo. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Compatibilidad con navegadores
background-position-x es compatible con todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge. Está ampliamente disponible, pero dado que fue estandarizada más tarde que el atajo background-position, se prefiere el atajo cuando necesitas establecer ambos ejes y solo se usa la forma extendida cuando específicamente quieres controlar o animar el eje horizontal por sí solo.
Propiedades relacionadas
background-position— el atajo que establece ambos ejes a la vez.background-position-y— la contraparte vertical de esta propiedad.background-image— define la imagen que se está posicionando.background-repeat— controla si la imagen se repite en mosaico y cómo lo hace.