Using JS ID as Background Image url in html [duplicate]

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 stackoverflow.com/questions/18665702/… and developer.mozilla.org/en-US/docs/Web/CSS/background-image for the same — Sunil Chaudhary
– Sunil Chaudhary, Commented May 10, 2020 at 18:14
Use the following to achieve your aim - document.getElementById('lblbackgroundimage').style.backgroundImage = 'url(' + backgroundimage + ')'; — maswerdna
– maswerdna, Commented May 10, 2020 at 18:20

AM Z · Accepted Answer · 2020-05-10 18:42:28Z

1

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>

answered May 10, 2020 at 18:42

AM Z

4412 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lakshitha madushan · Accepted Answer · 2020-05-10 18:42:51Z

0

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);

edited May 10, 2020 at 18:42

answered May 10, 2020 at 18:36

lakshitha madushan

6694 silver badges7 bronze badges

Comments

swarfey · Accepted Answer · 2020-05-10 18:23:49Z

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>

Tomas Gonzalez de Rosenzweig · Accepted Answer · 2020-05-10 19:13:14Z

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>

Collectives™ on Stack Overflow

Using JS ID as Background Image url in html [duplicate]

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related