Inspiring

Answered

Set a background-image like a variable

Forum|Forum|6 years ago
March 29, 2019
3 replies
7251 views

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.

This topic has been closed for replies.

Correct answer osgood_

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.

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;

}

WolfShade

Legend

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,

^ _ ^

O

osgood_

Legend

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

G

gian carlog61267382Author

Inspiring

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

O

osgood_

Legend

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?