Set a background-image like a variable

Report · Mar 29, 2019

I have a container set in this way:

<style>

#container {

width: 1000px;

height: 700px;

position: relative;

background-image: url(http://xy/1.jpg); background-size: cover;">

}

</style>

I need to set the "background-image" like a variable and change it from the web page with a button.

Any suggestion?

Thanks.

Report · Mar 29, 2019

You could do it with a stylesheet switcher.

Javascript CSS Style Sheet Switcher Demo

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 30, 2019

Do you want to click through a number of background images or just swap the current background image for another one?

Report · Apr 01, 2019

Thank you both Nancy and Osgod.

I have a background image and, from a menu list, I need to swap the current background with another one, and eventually replay this operation several time

Report · Apr 01, 2019

When you say 'menu list' do you mean you have a list like apples, oranges, pears, bananas which you want to click on and change the current background image to the appropriate image name which is clicked or is it just 2 background images which you just want to keep swapping when a single button is clicked?

Report · Apr 02, 2019

I'm sorry for my incomplete first question (sometime questions don't seem so) and for my late response (for work reasons I could not do this before).

I mean from "navbar" choose several background image inside a jumbotron

(class="jumbotron" style="background-image: url(http://xy ....).

Thank you all for you help.

Report · Apr 02, 2019

Have a look at How To Create a Slideshow

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Apr 02, 2019

Not sure what it is you are doing (my usual response) but if as you say you just want to change a set of background images in a Jumbotron container onclick of some buttons or navigation items see below (change the directory name from 'fruits' in the javascript script to point to where your images are kept and obviously change the 'data-image' names in the links to match those of yours:

HTML EXAMPLE

<li><a href="#" data-image="blackberries">Blackberries</a></li>

<li><a href="#" data-image="grapes">Grapes</a></li>

<li><a href="#" data-image="oranges">Oranges</a></li>

</nav>

JAVASCRIPT (Insert this at the foot of your page before the closing </body> tag.

var changeBg = document.querySelector(".changeBg");

var jumbotron = document.querySelector(".jumbotron");

changeBg.addEventListener("click", function(e)

{

jumbotron.style.backgroundImage = 'url(fruits/' + e.target.dataset.image + '.jpg)';

});

</script>

CSS

.jumbotron {

height: 500px;

background-image: url('fruits/apples.jpg');

background-size: cover;

}

Report · Apr 02, 2019

Thank you Ogod, very much!!

Report · Apr 02, 2019

I threw together (yesterday) a sample of how I would do it. I have a folder of four images, called "cssimagetestimages", from which the images are pulled.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <style>#bgImg{display: inline-block; width: 102px; height: 102px; border: 1px solid black; background-repeat: no-repeat;}</style>
    </head>

    <body>
        <div id="bgImg"></div><select id="chooseOne">
                                  <option value="">Choose One</option>
                                  <option value="blue-bicycle.100.100.jpg">blue-bicycle.100.100.jpg</option>
                                  <option value="pink-bicycle.100.100.jpg">pink-bicycle.100.100.jpg</option>
                                  <option value="red-bicycle.100.100.png">red-bicycle.100.100.png</option>
                                  <option value="swiss-army-bicycle.100.100.jpg">swiss-army-bicycle.100.100.jpg</option>
                               </select>
        <script>
            var chooseOne = document.getElementById('chooseOne');
            function changeBgImg(){
                var thisImg = chooseOne.value;
                document.getElementById('bgImg').style.backgroundImage = 'url(cssimagetestimages/' + thisImg + ')';
                }
            chooseOne.addEventListener('change',changeBgImg);
        </script>
    </body>
</html>

HTH,

^ _ ^

Report · Apr 02, 2019

Thank you also to you Wolf.

Report · Apr 02, 2019

One more question Osgood:

In which way is it possible (if it is) to set the argument of "data-image" like a variable?

I need a list to choose the images but also a random image, from the same list, when the user is accessing to the page.

Report · Apr 02, 2019

For a random background image on page load add the 3 lines below in red:

You can add to the - bgImages array ["blackberries", "grapes", "oranges", "pear", "anotherImage", "anotherImage"] - BUT you also need to update the number of images - rndBgImage = Math.floor((Math.random() * 5) + 1); - an array starts with the number 0. You can do this automatically but I assume you will have a set number of background images.

var changeBg = document.querySelector(".changeBg");

var jumbotron = document.querySelector(".jumbotron");

var bgImages = ["blackberries", "grapes", "oranges", "pear"];

rndBgImage = Math.floor((Math.random() * 3) + 1);

jumbotron.style.backgroundImage = 'url(fruits/' + bgImages[rndBgImage] + '.jpg)';

changeBg.addEventListener("click", function(e)

{

jumbotron.style.backgroundImage = 'url(fruits/' + e.target.dataset.image + '.jpg)';

});

</script>

Report · Apr 02, 2019

Thank you very very much again Osgood!!!

Report · Apr 19, 2019

I was kind of bored, and decided to re-write what I wrote to use CSS class for changing the background image of a div. Not much different, just added lines to the CSS and shortened the JavaScript considerably.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Swap Images</title>
        <style>
            #bgImg{
                display: inline-block; 
                width: 102px; 
                height: 102px; 
                border: 1px solid black; 
                background-repeat: no-repeat;
                }
            .img0{background-image:url();}
            .img1{background-image: url(cssimagetestimages/blue-bicycle.100.100.jpg);}
            .img2{background-image: url(cssimagetestimages/pink-bicycle.100.100.jpg);}
            .img3{background-image: url(cssimagetestimages/red-bicycle.100.100.png);}
            .img4{background-image: url(cssimagetestimages/swiss-army-bicycle.100.100.jpg);}
        </style>
    </head>
    <body>
        <div id="bgImg" class="img0"></div>
                              <select id="chooseOne">
                                  <option value="0">Choose One</option>
                                  <option value="1">blue-bicycle.100.100.jpg</option>
                                  <option value="2">pink-bicycle.100.100.jpg</option>
                                  <option value="3">red-bicycle.100.100.png</option>
                                  <option value="4">swiss-army-bicycle.100.100.jpg</option>
                               </select>
        <script>
            var chooseOne = document.getElementById('chooseOne');
            function changeBgImg(){
                var thisImg = chooseOne.value, bgImg = document.getElementById('bgImg');
                for(x=0; x <= 4; x++){
                    bgImg.classList.remove('img'+x);
                    }
                bgImg.classList.add('img'+thisImg);
                }
            chooseOne.addEventListener('change',changeBgImg);
        </script>
    </body>
</html>

It will only work in IE10 or later, and newer versions of FireFox, Chrome, et al.

V/r,

^ _ ^

Report · Apr 01, 2019

Is the background you intend to change the entire page background, the background of the same container as the select list, or the background of a container adjacent to the list?

Report · Apr 01, 2019

This sounds a lot like a homework assignment.

V/r,

^ _ ^

Report · Apr 01, 2019

WolfShade wrote
This sounds a lot like a homework assignment.
V/r,
^ _ ^

Sounds more like an 'undercover assignment' given the lack of details so far.........one can live in hope!

Report · Apr 01, 2019

If this is a homework assignment, I'm done here . I don't do homework for people.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 01, 2019

There are a couple of ways to do this. One would be to set one CSS class per image, aimed at that image in the images folder, and use JavaScript to add/remove classes depending upon which value is selected.

Another way would be to have the image path and name as the value of the selected (radio button, select, etc.) and use JavaScript to change the value of the style.background-image of the element displaying the image.

V/r,

^ _ ^

Set a background-image like a variable

1 Correct answer

Photos