Currently, I am working on designing a web page with a dynamic background image that adjusts responsively in the browser without distortion. The challenge is to randomly select an image from an array using jQuery.
Unfortunately, my knowledge of jQuery is limited, and I am struggling with this task. Any guidance or assistance would be greatly appreciated!
Here is a snippet of the code I have so far:
<head>
<title>Test</title>
<link href="css/css.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/jquery.js"></script>
</head>
<body>
<div id="background">
</div>
</body>
This is the CSS code for the background image:
body {
margin: 0;
}
#background {
width: 100%;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url(backgroundImage)
}
html, body {
overflow: none !important;
overflow-x: none !important;
overflow-y: none !important;
}
And here is the jQuery script for randomizing the background image:
var picArr = ['Images/IMG_3764.jpg', 'Images/IMG_3793.jpg', 'Images/IMG_4050.jpg', 'Images/IMG_4323.jpg', 'Images/IMG_4351.jpg', ];
var myNumber = Math.floor(Math.random() * 5);
$(document).ready(function () {
$("background-image").attr('url', picArr[myNumber]);
});