Comment définir la propriété CSS background-image en jQuery

Pour définir la propriété background-image de CSS en jQuery, utilisez la méthode css() de jQuery. Utilisez la propriété background-image pour ajouter l’image d’arrière-plan.
 
 

Code HTML :
<!DOCTYPE html>
<html>
	<head>
		<title>Définir la propriété CSS background-image</title>
		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script>
			// Mettez le code jQuery ici.
		</script>
		<style type="text/css">
			/* Mettez le code CSS ici. */
		</style>
	</head>
	<body>
		<div class="image"></div>
		<p><button type="button" id="btn">Définir l'image d'arrière-plan</button></p>
	</body>
</html>

 

Code CSS :
.image {
    width: 600px;
    height: 400px;
    border: 4px dashed #000;
}

 
 

Code jQuery :
$(document).ready(function() {
    $("#btn").click(function() {
        var url = "https://1.bp.blogspot.com/-rWHdFvjsDwA/XSJO7HQBxxI/AAAAAAAAFFA/_pIqqdkq4lMyZnxmjKrsxrVb9sepx-X6ACLcBGAs/s1600/sea.jpg";
        $(".image").css("background-image", "url(" + url + ")");
    });
});
Résultat

QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *