Propiedad CSS background-position-x
La propiedad background-position-x establece la posición horizontal de una capa de imagen de fondo. Se pueden especificar uno o más valores separados por comas.
Por defecto, una background-image se posiciona en la esquina superior izquierda del elemento y se repite tanto horizontal como verticalmente.
Nota
En CSS moderno, se recomienda usar la propiedad abreviada
background-positionen su lugar, ya quebackground-position-xrara vez se usa de forma aislada.
INFO
Los valores negativos son válidos.
| Valor inicial | left |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.backgroundPositionX = "right"; |
Sintaxis
Valores de background-position-x en CSS
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://es.w3docs.com/build/images/w3docs-logo-black.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 center
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://es.w3docs.com/build/images/w3docs-logo-black.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 left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://es.w3docs.com/build/images/w3docs-logo-black.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":
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://es.w3docs.com/build/images/w3docs-logo-black.png") repeat-y;
background-position-x: 30px;
}
</style>
</head>
<body>
</body>
</html>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 | Especifica el desplazamiento del borde vertical izquierdo de la imagen de fondo dada desde el borde vertical izquierdo de la capa de posición del fondo. |
| percentage | Especifica el desplazamiento de la posición horizontal de la imagen de fondo en relación con el 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. |
Práctica
¿Cuál es la función de la propiedad CSS background-position-x?