Highlighted

Set a background-image like a variable

Explorer ,
Mar 29, 2019

Copy link to clipboard

Copied

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.

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

<div class="jumbotron"></div>

<nav class="changeBg">

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

<li><a href="#" data-image="pear">Pear</a></li>

</nav>

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

<script>

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;

}

TOPICS
Learn Dreamweaver

Views

3.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Set a background-image like a variable

Explorer ,
Mar 29, 2019

Copy link to clipboard

Copied

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.

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

<div class="jumbotron"></div>

<nav class="changeBg">

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

<li><a href="#" data-image="pear">Pear</a></li>

</nav>

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

<script>

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;

}

TOPICS
Learn Dreamweaver

Views

3.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 29, 2019 0
Adobe Community Professional ,
Mar 29, 2019

Copy link to clipboard

Copied

You could do it with a stylesheet switcher.

Javascript CSS Style Sheet Switcher Demo

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 29, 2019 0
LEGEND ,
Mar 30, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 30, 2019 0
Explorer ,
Apr 01, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 01, 2019 0
LEGEND ,
Apr 01, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 01, 2019 0
Adobe Community Professional ,
Apr 01, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 01, 2019 0
LEGEND ,
Apr 01, 2019

Copy link to clipboard

Copied

This sounds a lot like a homework assignment.

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 01, 2019 0
LEGEND ,
Apr 01, 2019

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 01, 2019 1
Adobe Community Professional ,
Apr 01, 2019

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 01, 2019 0
Explorer ,
Apr 02, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2019 0
Adobe Community Professional ,
Apr 02, 2019

Copy link to clipboard

Copied

Have a look at How To Create a Slideshow


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2019 1
LEGEND ,
Apr 02, 2019

Copy link to clipboard

Copied

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

<div class="jumbotron"></div>

<nav class="changeBg">

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

<li><a href="#" data-image="pear">Pear</a></li>

</nav>

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

<script>

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2019 0
Explorer ,
Apr 02, 2019

Copy link to clipboard

Copied

Thank you Ogod, very much!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2019 0
LEGEND ,
Apr 02, 2019

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2019 0
Explorer ,
Apr 02, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2019 0
Explorer ,
Apr 02, 2019

Copy link to clipboard

Copied

Thank you also to you Wolf.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2019 0
LEGEND ,
Apr 02, 2019

Copy link to clipboard

Copied

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.

<script>

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2019 1
Explorer ,
Apr 02, 2019

Copy link to clipboard

Copied

Thank you very very much again Osgood!!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2019 0
LEGEND ,
Apr 19, 2019

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 19, 2019 0
LEGEND ,
Apr 01, 2019

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 01, 2019 1