How do I center a dynamically-changing background image without CSS?-CodePudding

How do I center a dynamic background image? Tried using divs and center tags but it just breaks the code. Prefer to not use CSS. I've looked at the other threads and using the code in the html and body doesn't work.

<html>
<head>
  <style>
    .day {
      background-image: url(day.jpg);
    }
    
    .night {
      background-image: url(night.jpg);
    }
  </style>
</head>
<body  >
  <script>
    setInterval(change_background, 1000 * 60 * 1);

    function change_background() {
      var d = new Date();
      var n = d.getHours();
      console.log(n);
      if (n == 19 || n < 7) {
        document.body.className = "night";
      } else {
        document.body.className = "day";
      }
      console.log("test");
    }

    change_background();
  </script>
</body>
</html>

CodePudding user response：

Can you provide more information about what you are doing exactly?

my guess is that you try to make a dark mode or smoothing like that with the background changing and you want it to be depending on the time.

but the code is not clear, to be honest, and you need to organize it more with HTML and CSS, it will be much easier if you use CSS.

CodePudding user response：

Don't really know what you want but this centers the pictures. Also I changed the logic here: if (n >= 19 || n < 7) {

<html>
<head>
    <style>
        .day {
            background-image: url(day.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            background-size: cover;
        }

        .night {
            background-image: url(night.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            background-size: cover;
        }
    </style>
</head>
<body  >
    <script>
        setInterval(change_background, 1000 * 60 * 1)

        function change_background() {
            var d = new Date()
            var n = d.getHours()
            console.log(n)
            if (n >= 19 || n < 7) {
                document.body.className = 'night'
            } else {
                document.body.className = 'day'
            }
            console.log(document.body.className)
        }

        change_background()
    </script>
</body>

CodePudding user response：

I would sudgest doing it in CSS, but if you want to use JS then you can do it with document.body.style.backgroundPosition = "center"

Try this between the script tags at the end of the body:

let hour
document.body.style.backgroundPosition = "center"

setInterval(change_background, 1000 * 60 * 1);

function change_background() {
  hour = new Date().getHours()

  if (hour > 19 || hour < 7) {
    document.body.className = "night"
  } else {
    document.body.className = "day"
  }
}