CODEWITHSUNDEEP
javascriptphphtmljquerycss
Darknicks
Darknicks

Reputation: 57

How to change background every day?

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!

Upvotes: 1

Views: 859

Answers (4)

Darknicks
Darknicks

Reputation: 57

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>

Upvotes: -1

Twisty
Twisty

Reputation: 30893

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.

Upvotes: 3

Yupma
Yupma

Reputation: 2546

Use setInterval(backgroundChange, 86400000); this way the function backgroundChange will run in an interval of every 24hr(=86400000ms).
You can then define a function backgroundChange() 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>

Upvotes: -2

Bdeering
Bdeering

Reputation: 350

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.

Upvotes: 2

Related Questions