making a background image dynamic and change every few seconds

Question

What my code is doing:

creates an img tag that changes the image every 3 seconds.
background image is static
currently, we have a dynamic img tag that's changing every 3 seconds on top of a static background. reason being it was a test to see I could make it dynamic

What I want to do:

background-image inside the script tag to change and somehow make the URL() dynamic. Background image should change very 3 seconds

<div class="text-center background">

    <p>come content</p>

    <img id="image" src="~/images/baseball.jpg">
    
    <script type = "text/javascript">
        var image = document.getElementById("image");
        var currentPos = 0;
        var images = ["/images/baseball.jpg", "/images/basketball.jpg", "/images/football.jpg", "/images/soccerball.jpg"], i = 0;

        function changeimage()
        {
            if (++currentPos >= images.length)
                currentPos = 0;

            image.src = images[currentPos];
        }
        setInterval(changeimage, 3000);
    </script>

</div>

<style>
.background{
    background-image: url(/images/basketball.jpg); //<<<-----this line needs to be dynamic
    background-repeat: no-repeat;
    background-size: cover;
    height: 1000px;
}
</style>

I understand I may need to restructure my code a little. I just don't know how to go about doing it with a background. with a normal image tag it's easy because I simply reassign a new image path to the old Id.

Additional information:

framework: .netcore-mvc

bootstrap: 4.6

You could remove the razor and asp tags, your attempt and the expected solution will be in javascript so the server architecture is irrelevant. — Chris Schaller, Jul 19 '21 at 00:25

score 1 · Accepted Answer · answered Jul 19 '21 at 00:20

Just set the style of the background element, its practically the same as your current solution:

There's a good solution for this on SO: [Changing background-image with JavaScript]

<div id="background" class="text-center background">

    <p>come content</p>
        
    <script type = "text/javascript">
        var background = document.getElementById("background");
        var currentPos = 0;
        var images = ["/images/baseball.jpg", "/images/basketball.jpg", "/images/football.jpg", "/images/soccerball.jpg"], i = 0;

        function changeimage()
        {
            if (++currentPos >= images.length)
                currentPos = 0;

            background.style.backgroundImage = "url(" + images[currentPos] + ")";
        }
        setInterval(changeimage, 3000);
    </script>

</div>

This solution is pure HTML Javascript, there are image carousel controls and component based solutions that will help if you want to run the timing logic on the server, but this javascript is a very simple solution to the problem.

making a background image dynamic and change every few seconds

1 Answers1