jQuery css() set css background-image property using

Description

jQuery css() set css background-image property using

View in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Setting background-image CSS Property</title>
<style>
    .box{/*from  w  w  w .j  a  va  2  s.  c  om*/
        width: 500px;
        height: 300px;
        border: 5px solid #333;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    // Set background image of a div on click of the button
    $("button").click(function(){
        var imageUrl = "image1.png";
        $(".box").css("background-image", "url(" + imageUrl + ")");
    });
});
</script>
</head>
<body>
    <div class="box"></div>
    <p><button type="button">Set Background Image</button></p>
</body>
</html>



PreviousNext

Related