Para cambiar la imagen de fondo usando jQuery, puede usar el método jQuery CSS() . Para esto, el valor completo de la propiedad se especifica usando la notación funcional url() .
Enfoque: supongamos que tenemos una URL de imagen almacenada en una variable y luego usamos el método css() para cambiar el valor de la imagen de fondo.
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
jQuery Changing background-image CSS Property
</title>
<style>
.box {
width: 700px;
height: 220px;
border: 2px solid black;
background-repeat: no-repeat;
background-image: url(
"https://www.geeksforgeeks.org/wp-content/uploads/javascript-768x256.png");
}
h1{
color:green;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
// Change background image of a div by clicking on the button
$("button").click(function() {
var imageUrl =
"https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner-768x256.png";
$(".box").css("background-image", "url(" + imageUrl + ")");
});
});
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>
jQuery Changing background-image CSS Property
</h3>
<div class="box"></div>
<p>
<button type="button">
Change Background Image
</button>
</p>
</center>
</body>
</html>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por MeghaKakkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA