Swap CSS background image on click using jQuery

Question

I'd like to create a function that will cause the CSS background image of an element to change to a different image on click. Ideally, a second click would revert the image to the original, and so on.

I've searched this site for similar examples, and I was able to find some close examples, but nothing on the nose. Rather than pasting in some code I've found elsewhere, I'm hoping someone can take a look at my HTML/CSS in the Fiddle below and tell me what I need to do with the jQuery.

HTML:

<header id="switch">
    <h1>
        <span>Howie Mandel</span>
    </h1>
    <h2>
        <span>Howie Doin</span> 
    </h2>
</header>

CSS:

header {
    text-align: center;
    padding-top: 4em;
    background-image: url("https://media.timeout.com/images/102596453/image.jpg");
    background-size: cover;
    height: 10em;
    background-position: bottom;
 }

 header-alt {
    text-align: center;
    padding-top: 4em;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c0/LA_San_Gabriel_Mountains.jpg");
    background-size: cover;
    height: 10em;
    background-position: bottom;
 }

Fiddle

did any answer help you out? if so, please mark one as accepted (people spent time on them :D ) — jdmdevdotnet
– jdmdevdotnet, Commented Feb 22, 2018 at 16:54

Cristian S. · Accepted Answer · 2018-02-20 00:30:13Z

1

You can just toggle a class which overrides the standard background image. Take a look.

$('.change').click(() => {
$('#switch').toggleClass('header-alt');
});

header {
	text-align: center;
	padding-top: 4em;
	background-image: url("https://media.timeout.com/images/102596453/image.jpg");
	background-size: cover;
	height: 10em;
	background-position: bottom;
 }
  
 .header-alt {
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c0/LA_San_Gabriel_Mountains.jpg") !important;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

		<header id="switch">
			<h1>
				<span>Howie Mandel</span>
			</h1>
			<h2>
				<span>Howie Doin</span> 
			</h2>
		</header>
    <button class="change">
  Change Background
    </button>

answered Feb 20, 2018 at 0:30

Cristian S.

9735 silver badges13 bronze badges

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

2 Comments

dedlive Over a year ago

Thanks, this works but for whatever reason I'm unable to get it working on my site. No helpful errors in console. Any thoughts?

Cristian S. Over a year ago

Be sure that you are loading jquery script (script tags) in the end.. before closing body. And check that you need to define rule (new background img) for the class „header-alt“ in css.

Facundo Corradini · Accepted Answer · 2018-02-20 00:31:38Z

1

Use toggleclass with a modifier.

header {
  text-align: center;
  padding-top: 4em;
  background-size: cover;
  height: 10em;
  background-position: bottom;
  background-image: url("https://media.timeout.com/images/102596453/image.jpg");
}

.alt{
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c0/LA_San_Gabriel_Mountains.jpg");
}

That way you only need a single line of jquery

$('#button').click(function () {
  $('header').toggleClass('alt');
});

answered Feb 20, 2018 at 0:31

Facundo Corradini

3,94312 silver badges24 bronze badges

Comments

jdmdevdotnet · Accepted Answer · 2018-02-20 00:20:39Z

0

This should do the trick

$('#divID').css("background-image", "url(/myimage.jpg)");

you can set up a click event like this

$('#divID').on('click', function() {
   ...
   $('#divID').css("background-image", "url(/myimage.jpg)");  
}

answered Feb 20, 2018 at 0:20

jdmdevdotnet

1

Comments

Griffen · Accepted Answer · 2018-02-20 00:22:41Z

0

Instead of having two CSS rules (header and header-alt), I would use classes lay it out like this:

header {
  text-align: center;
  padding-top: 4em;
  background-size: cover;
  height: 10em;
  background-position: bottom;
}
header.mandel {
  background-image: url("https://media.timeout.com/images/102596453/image.jpg");
}
header.doin {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c0/LA_San_Gabriel_Mountains.jpg");
}

Start by giving the header in the HTML the class you want to start with (<header class="mandel">)

Then you can have jQuery like this:

$('#button').click(function () {
  $('header').toggleClass('mandel');
  $('header').toggleClass('doin');
});

Where your button has the ID button.

answered Feb 20, 2018 at 0:22

Griffen

4271 gold badge4 silver badges23 bronze badges

1 Comment

Cristian S. Over a year ago

Why would you toggle 2 classes? On every click.. that means : 1. Query the document and find the element, check if the class exists, if not add it. And that twice.. not very performant right? :D

Collectives™ on Stack Overflow

Swap CSS background image on click using jQuery

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related