CODEWITHSUNDEEP
jqueryhtmlcss
dedlive
dedlive

Reputation: 1

Swap CSS background image on click using jQuery

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

Upvotes: 0

Views: 68

Answers (4)

Facundo Corradini
Facundo Corradini

Reputation: 3913

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');
});

Upvotes: 1

Cristian S.
Cristian S.

Reputation: 973

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>

Upvotes: 1

Griffen
Griffen

Reputation: 417

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.

Upvotes: 0

jdmdevdotnet
jdmdevdotnet

Reputation: 1

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)");  
}

Upvotes: 0

Related Questions