How To Change Background Image In Html

how to change background image in html
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
adding background image
body{background-image: url("paper.gif");}
how to change background image in html
<head>

<style>
body{
width: 1366px;
height: 768px;
}</style>


</head>


<body id="imageChange">
<script>
// onload document window using jquery
$().ready(function(){
var i = 0;

// Background Images
var images = [
'https://picsum.photos/id/237/200/300',
'https://picsum.photos/200/300?grayscale',
'https://picsum.photos/200/300/?blur'
]

// pick body element ID
var image = $('#imageChange')

// set initial background-image
image.css('background-image', 'url(https://picsum.photos/200/300/?blur)')

// change image every after 3 seconds
setInterval(function(){
image.fadeOut(1000, function(){
image.css('background-image', 'url(' + images [i++] +')')
image.fadeIn(1000)
})
if(1 == images.length)
i = 0
}, 3000)
})
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
</body>

 

 

Leave a Comment