La propiedad background-position en CSS se utiliza principalmente para establecer la posición inicial de la imagen de fondo, es decir, se utiliza para establecer una imagen en una determinada posición. La posición relativa a la capa de posicionamiento se puede establecer mediante la propiedad background-origin .
Sintaxis:
background-position: value;
Nota: La imagen de fondo se coloca por defecto en la esquina superior izquierda de un elemento con una repetición tanto horizontal como verticalmente.
Valores de propiedad:
posición de fondo: arriba a la izquierda; : Esta propiedad se utiliza para establecer la imagen en la parte superior izquierda.
Ejemplo: Este ejemplo ilustra el uso de la propiedad background-position donde el valor de posición se establece en la parte superior izquierda.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}
</style>
</head>
<body>
</body>
</html>
Producción:
posición de fondo: centro izquierda; : Esta propiedad se utiliza para establecer la imagen en el centro izquierdo.
Ejemplo: Este ejemplo ilustra el uso de la propiedad background-position donde el valor de posición se establece en el centro izquierdo.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left center;
}
</style>
</head>
<body>
</body>
</html>
Producción:
posición de fondo: abajo a la izquierda; : Esta propiedad se utiliza para establecer la imagen en la parte inferior izquierda.
Ejemplo: Este ejemplo ilustra el uso de la propiedad background-position donde el valor de posición se establece en la posición inferior izquierda.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left bottom;
}
</style>
</head>
<body>
</body>
</html>
Producción:
posición de fondo: parte superior central; : esta propiedad se utiliza para establecer la imagen en la posición superior central.
Ejemplo: Este ejemplo ilustra el uso de la propiedad background-position donde el valor de posición se establece en la posición superior central.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
</style>
</head>
<body>
</body>
</html>
Producción:
posición de fondo: centro centro; : esta propiedad se utiliza para establecer la imagen en la posición central central.
Ejemplo: Este ejemplo ilustra el uso de la propiedad background-position donde el valor de posición se establece en la posición central central.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
</style>
</head>
<body>
</body>
</html>
Producción:
posición de fondo: centro inferior; : esta propiedad se utiliza para establecer la imagen en la posición inferior central.
Ejemplo: Este ejemplo ilustra el uso de la propiedad background-position donde el valor de posición se establece en la posición inferior central.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center bottom;
}
</style>
</head>
<body>
</body>
</html>
Producción:
posición de fondo: arriba a la derecha; : esta propiedad se utiliza para establecer la imagen en la posición superior derecha.
Ejemplo: Este ejemplo ilustra el uso de la propiedad background-position donde el valor de posición se establece en la posición superior derecha.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}
</style>
</head>
<body>
</body>
</html>
Producción:
posición de fondo: centro derecho; : esta propiedad se utiliza para establecer la imagen en la posición central derecha.
Ejemplo: Este ejemplo ilustra el uso de la propiedad background-position donde el valor de posición se establece en la posición central derecha.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right center;
}
</style>
</head>
<body>
</body>
</html>
Producción:
posición de fondo: abajo a la derecha; : Esta propiedad se utiliza para establecer la imagen en la posición inferior derecha.
Ejemplo: Este ejemplo ilustra el uso de la propiedad background-position donde el valor de posición se establece en la posición inferior derecha.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
</style>
</head>
<body>
</body>
</html>
Producción:
posición de fondo: 25% 75%; : esta propiedad se utiliza para establecer la imagen en un 25 % desde la izquierda y un 75 % desde la parte superior.
Nota: Para la notación x%y%, aquí x% denota la posición horizontal & y% denota la posición vertical con respecto a la posición inicial, es decir, arriba a la izquierda.
Ejemplo: Este ejemplo ilustra el uso de la propiedad background-position donde el valor de la posición se establece en forma de porcentaje.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 25% 75&;
}
</style>
</head>
<body>
</body>
</html>
Producción:
posición de fondo: 30px 80px; : Esta propiedad se usa para configurar la imagen a 30 píxeles desde la izquierda y 80 píxeles desde la parte superior.
Nota : para la notación x-pos y-pos, aquí las unidades se representan en píxeles o en cualquier otra unidad CSS.
Ejemplo: Este ejemplo ilustra el uso de la propiedad background-position donde el valor de posición se establece en forma de píxeles.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30px 80px;
}
</style>
</head>
<body>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad background-position se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 4.0
- Microsoft Edge 12.0
- Firefox 1.0
- Ópera 3.5
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por motamarriphani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA