Using JS ID as Background Image url in html

Question

This is my first post so forgive me if it's duplicated.

I am trying to change the background image of an HTML document based on the time of the day. So far, I achieved to do so with document.write however, the output is not an image I can make responsive to the layout (cover/contain or width:100vh height 100vh) with CSS.

The code I have working is the following:

 <html>
<head>
<style>
</style>
</head>
<script>
    var myDate = new Date();
    var hrs = myDate.getHours();

    var backgroundimage;

   if (hrs < 12)
        document.write("<img src='/images/TomasGR/bg-by-time/background-daytime/images/morning.jpg'>");
    else if (hrs >= 12 && hrs <= 17)
        document.write("<img src='/images/TomasGR/bg-by-time/background-daytime/images/afternoon.jpg'");
    else if (hrs >= 17 && hrs <= 24)
        document.write("<img src='/images/TomasGR/bg-by-time/background-daytime/images/evening.jpg'>");

    backgroundimage
</script>
</html>

So I tried modifying the code so I can use the label as a URL but at the end the result is only the display of the path to the file depending on the time of the day.

    <html>
<head>
</head>
<style>
</style>
<body>
<div id="lblbackgroundimage"></div>
</body>
<script>
    var myDate = new Date();
    var hrs = myDate.getHours();

    var backgroundimage;

    if (hrs < 12)
        backgroundimage = '/images/TomasGR/bg-by-time/background-daytime/images/morning.jpg';
    else if (hrs >= 12 && hrs <= 17)
        backgroundimage = '/images/TomasGR/bg-by-time/background-daytime/images/afternoon.jpg)';
    else if (hrs >= 17 && hrs <= 24)
        backgroundimage = '/images/TomasGR/bg-by-time/background-daytime/images/evening.jpg';

    document.getElementById('lblbackgroundimage').innerHTML =
       backgroundimage;
</script>
</html>

I've been reading many similar posts but I cannot find how to do it or what I'm doing wrong.

Any help would be greatly appreciated.

PS. I am doing it within a CMS inserting it as an HTML module.

You have to use `background-image` property instead of modifying innerHTML. Recommend you to read https://stackoverflow.com/questions/18665702/javascript-setting-background-image-of-a-div-via-a-function-and-function-paramet and https://developer.mozilla.org/en-US/docs/Web/CSS/background-image for the same — Sunil Chaudhary, May 10 '20 at 18:14
Use the following to achieve your aim - `document.getElementById('lblbackgroundimage').style.backgroundImage = 'url(' + backgroundimage + ')';` — maswerdna, May 10 '20 at 18:20

score 1 · Answer 1 · answered May 10 '20 at 18:42

This is a solution for your problem:

<html>
    <head>
    </head>
    <style>
    </style>
    <body>
        <div>
            <img id = 'img' src=''>
        </div>
    </body>
    <script type="text/javascript">
        var myDate = new Date();
        var hrs = myDate.getHours();

        if (hrs < 12){
            document.getElementById('img').src = '/images/TomasGR/bg-by-time/background-daytime/images/morning.jpg';
        }
        else if (hrs >= 12 && hrs <= 17){
            document.getElementById('img').src = '/images/TomasGR/bg-by-time/background-daytime/images/afternoon.jpg';
        }
        else if (hrs >= 17 && hrs <= 24){
            document.getElementById('img').src = '/images/TomasGR/bg-by-time/background-daytime/images/evening.jpg';
        }
        console.log(hrs);

    </script>
</html>

score 0 · Answer 2 · answered May 10 '20 at 18:23

So, the issue is that you just paste the image as plain text into the inner html, but you need to paste the image into the img src. To add an image, you should create an img tag first. Since there is nothing else in the div, you dont really need it, so you can change the div tag to an img tag. The result would be:

<html>
    <head>
    </head>
    <style>
    </style>
    <body>
    <img id="lblbackgroundimage"></div>
    </body>
    <script>
        var myDate = new Date();
        var hrs = myDate.getHours();

        var backgroundimage;

        if (hrs < 12)
            backgroundimage = '/images/TomasGR/bg-by-time/background-daytime/images/morning.jpg';
        else if (hrs >= 12 && hrs <= 17)
            backgroundimage = '/images/TomasGR/bg-by-time/background-daytime/images/afternoon.jpg)';
        else if (hrs >= 17 && hrs <= 24)
            backgroundimage = '/images/TomasGR/bg-by-time/background-daytime/images/evening.jpg';

        document.getElementById('lblbackgroundimage').src =
           backgroundimage;
    </script>
    </html>

lakshitha madushan · Accepted Answer · 2020-05-10T18:42:51.073

var myDate = new Date();
var hrs = myDate.getHours();

var backgroundimage;

if (hrs < 12)
    backgroundimage = ("<img src='/images/TomasGR/bg-by-time/background-daytime/images/morning.jpg'>");
else if (hrs >= 12 && hrs <= 17)
    backgroundimage = ("<img src='/images/TomasGR/bg-by-time/background-daytime/images/afternoon.jpg'");
else if (hrs >= 17 && hrs <= 24)
    backgroundimage = ("<img src='/images/TomasGR/bg-by-time/background-daytime/images/evening.jpg'>");

document.getElementById('lblbackgroundimage').innerHTML =(backgroundimage);

score 0 · Answer 4 · answered May 10 '20 at 19:13

Thanks to all!!

The solution was as follows:

<html>
<head>
</head>
<style>
</style>
<body>
<label id="lblbackgroundimage"></label>
</body>
<script>
    var myDate = new Date();
    var hrs = myDate.getHours();

    var backgroundimage;

    if (hrs < 12)
        backgroundimage = 'morning.jpg';
    else if (hrs >= 12 && hrs <= 17)
        backgroundimage = 'afternoon.jpg';
    else if (hrs >= 17 && hrs <= 24)
        backgroundimage = 'evening.jpg';

    document.getElementById('lblbackgroundimage').innerHTML = '<div data-src="/images/TomasGR/bg-by-time/background-daytime/images/' + backgroundimage + 'data-sizes="(max-aspect-ratio: 2048/1572) 130vh uk-img="" class="uk-background-norepeat uk-background-cover uk-background-top-center uk-background-fixed uk-section uk-section-large uk-flex" uk-parallax="bgy: -5vh,4vh" uk-height-viewport="offset-top: true;" style="min-height: calc(100vh); background-image: url(&quot;https://tomasgr.org/images/TomasGR/bg-by-time/background-daytime/images/'+backgroundimage+'&quot;); background-repeat: no-repeat; background-size: 1852px 1012.61px; background-position-y: calc(-83.61px);"></div>';    
</script>
</html>

Using JS ID as Background Image url in html

4 Answers4