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

juillet 7, 2019décembre 19, 2023 Amine KOUIS Aucun commentaire

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 + ")");
    });
});