Issue
I have a webpage and I would like to change the background to a different one every day. I have 4 images in total so I would like to cycle through them. How can I do that?
Edit: According to the comments, it looks like I can't do this with HTML and CSS alone so I would have to use another language. How can I do that?
Here's the code of my CSS and HTML respectively:
.main-section .main-division {
background: url(../images/background-1.jpg) no-repeat center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
position: relative;
z-index: 0;
min-height: 100vh;
align-items: center;
display: grid;
height:auto;
max-width: 100%;
}<!DOCTYPE html>
<html lang="zxx">
<head>
<title>Test</title>
<meta name="robots" content="noindex">
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>
<body>
<section class="main-section">
<div class="main-division">
<div class="wrapper">
<div class="main-cover" >
CONTENT
</div>
</div>
</div>
</section>
</body>
</html>Your help will be appreciated.
Thanks in advance!
Solution
I was able to make it work using a combination of the response from @Rana and @Twisty
Here's the resulting code:
//Code on change-background.js
$(function() {
var backgrounds = [
"../images/background-1.jpg",
"../images/background-2.jpg",
"../images/background-3.jpg",
"../images/background-4.jpg"
];
var dt = new Date();
var index = dt.getDay() % 4;
document.querySelector('.main-division').style.backgroundImage = "url(" + backgrounds[index] + ")";
});.main-section .main-division {
background: url(../images/background-1.jpg) no-repeat center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
position: relative;
z-index: 0;
min-height: 100vh;
align-items: center;
display: grid;
height:auto;
max-width: 100%;
}<!DOCTYPE html>
<html lang="zxx">
<head>
<title>Test</title>
<meta name="robots" content="noindex">
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<section class="main-section">
<div class="main-division">
<div class="wrapper">
<div class="main-cover" >
CONTENT
</div>
</div>
</div>
</section>
<script src="js/change-background.js"></script>
</body>
</html>Answered By - Darknicks
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.