El estilo HTML DOM backgroundPosition : Establece o devuelve la posición de la imagen de fondo en un elemento.
Sintaxis:
- Para obtener la propiedad backgroundPosition
object.style.backgroundPosition
- Para establecer la propiedad backgroundPosition
object.style.backgroundPosition = value
Valores devueltos: Devuelve un valor de string, que representa la posición de una imagen de fondo.
Valores de propiedad:
- valores de palabras clave: esto se usa para especificar la posición usando palabras clave. Si solo se especifica un valor, el otro valor sería ‘centro’ de forma predeterminada. Las posibles combinaciones de palabras clave son:
- arriba a la izquierda
- centro Superior
- parte superior derecha
- centro izquierda
- centro centro
- centro derecha
- abajo a la izquierda
- parte inferior central
- abajo a la derecha
- x% y%: se utiliza para especificar la posición mediante porcentaje. El x% determina la posición horizontal y el y% determina la posición vertical con respecto a la posición inicial superior izquierda.
- xpos ypos : esto se usa para especificar la posición usando píxeles o cualquier otra medida de CSS. El xpos determina la posición horizontal y el ypos determina la posición vertical con respecto a la posición inicial superior izquierda.
- initial : se utiliza para establecer esta propiedad en su valor predeterminado.
- heredar : hereda la propiedad de su padre.
Los valores se explican con los siguientes ejemplos:
Ejemplo-1: uso de valores de palabras clave. Usamos el valor ‘abajo a la derecha’ en este ejemplo.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style backgroundPosition Property
</title>
<style>
.bg-img {
height: 300px;
width: 300px;
border-style: solid;
background:
url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png')
no-repeat center;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style backgroundPosition Property
</b>
<p>
Click on the button to change the
position of the background image
</p>
<div class="bg-img">
</div>
<button onclick="changePos()">
Change position of background image
</button>
<script>
function changePos() {
elem = document.querySelector('.bg-img');
// Setting the position to bottom vertically
// and right horizontally
elem.style.backgroundPosition = 'bottom right';
}
</script>
</body>
</html>
Producción:
- Antes de pulsar el botón:
- Después de presionar el botón:
Ejemplo-2: uso de porcentaje para especificar la posición. Usamos ‘25% 75%’ para posicionar la imagen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
DOM Style backgroundPosition Property
</title>
<style>
.bg-img {
height: 300px;
width: 300px;
border-style: solid;
background:
url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png')
no-repeat center;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style backgroundPosition Property
</b>
<p>
Click on the button to change the
position of the background image
</p>
<div class="bg-img">
</div>
<button onclick="changePos()">
Change position of background image
</button>
<script>
function changePos() {
elem = document.querySelector('.bg-img');
// Setting the position to 25% horizontally
//and 75% vertically
elem.style.backgroundPosition = '25% 75%';
}
</script>
</body>
</html>
Producción:
- Antes de pulsar el botón:
- Después de presionar el botón:
Ejemplo-3: Uso de unidades fijas para especificar la posición. Usamos ’50px 25px’ para posicionar la imagen.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style backgroundPosition Property
</title>
<style>
.bg-img {
height: 300px;
width: 300px;
border-style: solid;
background:
url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png')
no-repeat center;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style backgroundPosition Property
</b>
<p>
Click on the button to change the
position of the background image</p>
<div class="bg-img">
</div>
<button onclick="changePos()">
Change position of background image
</button>
<script>
function changePos() {
elem = document.querySelector('.bg-img');
// Setting the position to 50px horizontally
//and 25px horizontally
elem.style.backgroundPosition = '50px 25px';
}
</script>
</body>
</html>
Producción:
- Antes de pulsar el botón:
- Después de presionar el botón:
Ejemplo-4: Usando el valor inicial. Esto establece la posición en su valor predeterminado.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style backgroundPosition Property</title>
<style>
.bg-img {
height: 300px;
width: 300px;
border-style: solid;
background:
url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png')
no-repeat center;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style backgroundPosition Property
</b>
<p>
Click on the button to change the
position of the background image
</p>
<div class="bg-img">
</div>
<button onclick="changePos()">
Change position of background image
</button>
<script>
function changePos() {
elem = document.querySelector('.bg-img');
// Setting the position to the default
// value with initial
elem.style.backgroundPosition = 'initial';
}
</script>
</body>
</html>
Producción:
- Antes de pulsar el botón:
- Después de presionar el botón:
Ejemplo-5: Usar el valor heredado. Esto hereda la posición de su elemento padre.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style backgroundPosition Property
</title>
<style>
/* Parent element */
#parent {
height: 300px;
width: 300px;
border-style: solid;
/* Setting the parent's background-position
//to center left*/
background-position: center left;
}
.bg-img {
height: 300px;
width: 300px;
background:
url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png')
no-repeat center;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style backgroundPosition Property
</b>
<p>
Click on the button to change the
position of the background image
</p>
<div id="parent">
<div class="bg-img"></div>
</div>
<button onclick="changePos()">
Change position of background image
</button>
<script>
function changePos() {
elem = document.querySelector('.bg-img');
// Setting the position to inherit from its parent
elem.style.backgroundPosition = 'inherit';
}
</script>
</body>
</html>
Producción:
- Antes de pulsar el botón:
- Después de presionar el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad backgroundPosition se enumeran a continuación:
- cromo 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Ópera 3.5
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA