En este artículo, veremos cómo cambiar la posición de la imagen de fondo usando jQuery. Para cambiar la posición de la imagen de fondo, usaremos el método css() con la propiedad float.
El método css() se usa para cambiar la propiedad de estilo del elemento seleccionado. La propiedad float se usa para cambiar el flujo normal de un elemento. Define cómo debe flotar un elemento y colocar un elemento en el lado derecho o izquierdo de su contenedor.
Sintaxis:
$(selector).css(float: position)
Valor devuelto: Devolverá el valor de la propiedad para el elemento seleccionado.
En el siguiente ejemplo, hemos creado un elemento de imagen y un botón. Cuando el usuario hace clic en el botón, se llama al método jQuery css() y se aplica la propiedad flotante en la imagen para cambiar su posición.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to change the position of
background image using jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("#position").on('click', function() {
$("img").css({
float: "left",
paddingLeft: "200px"
});
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to change the position of
background image using jQuery?
</h3>
<input type="button" id="position"
value="Change Position"
style="padding: 5px 10px;">
<br><br>
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png"
alt="jQuery" width="400" height="250">
</center>
</body>
</html>
Producción:
