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!
You can accomplish this with a bit of Javascript. The following snippet will display a different colour each day of the week:
let element = document.querySelector('.change-my-colour');
/* .change this to .main-division in your code ^^^ */
let date = new Date();
switch(date.getDay()) { /* use date.getDate() instead for days of the month */
case 0: /* Sunday */
element.style.background = "red";
break;
case 1: /* Monday */
element.style.background = "orange";
break;
case 2: /* Tuesday */
element.style.background = "yellow";
break;
/* etc... */
default:
break;
}.change-my-colour {
width: 100vw;
height: 100vh;
background: blue; /* default value */
}<div class="change-my-colour"></div>Change the colours above to the images you would like to display on each day (using the same form as in your css but wrapped in quotes).
Also if you're unfamiliar with Javascript the easiest way to include it in your website is using a script tag.
Consider the following example.
$(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;
$(".main-section .main-division").css("background-image", "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%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main-section">
<div class="main-division">
<div class="wrapper">
<div class="main-cover">
CONTENT
</div>
</div>
</div>
</section>Using an array, you can store (or collect) the image paths. You can pick an Index based on the Day of the Week (0 - 6) and use the Modulus operator to help ensure the the index is always correct or in scope.
Use
setInterval(backgroundChange, 86400000);this way the functionbackgroundChangewill run in an interval of every 24hr(=86400000ms).
You can then define a functionbackgroundChange()which change background .
You can try different approach by using week days or date of month as input value
You can use if elseIf loops like in below snippet :
backgroundImages = ['urlImage1', 'urlImage2', 'urlImage3', 'urlImage4'];
var date = new Date();
var dayOfWeek = date.getDay();
if (dayOfWeek == "0") {
document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek] + ")";
} else if (dayOfWeek == "1") {
document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek] + ")";
} else if (dayOfWeek == "2") {
document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek] + ")";
} else if (dayOfWeek == "3") {
document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek] + ")";
} else if (dayOfWeek == "4") {
document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek - 4] + ")";
} else if (dayOfWeek == "5") {
document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek - 4] + ")";
} else if (dayOfWeek == "6") {
document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek - 4] + ")";
} else {
document.querySelector('.main-division').style.backgroundImage = "url(somebackup-image)";
}.main-section .main-division {
background: 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>
<script src="If_JS_is_present_in_file_use_src_else_simply_write_inside_this_tag"></script>
</body>
</html>