Чтобы установить CSS-свойство background-image
элемента с помощью jQuery-метода CSS()
, вам необходимо указать полное значение свойства, используя функциональную нотацию url()
.
Например, если у вас есть URL-адрес изображения, хранящийся в переменной JavaScript, тогда в методе CSS()
вам нужно установить значение примерно так, чтобы оно работало:
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Setting background-image CSS Property</title>
<style>
.box{
width: 500px;
height: 300px;
border: 5px solid #333;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
// Устанавливаем фоновое изображение div по нажатию кнопки
$("button").click(function(){
var imageUrl = "images/sky.jpg";
$(".box").css("background-image", "url(" + imageUrl + ")");
});
});
</script>
</head>
<body>
<div class="box"></div>
<p><button type="button">Set Background Image</button></p>
</body>
</html>