CODEWITHSUNDEEP
jquerycssbackground-image
joe
joe

Reputation: 219

toggling (show/hide) one background out of a two-background div, css jquery

I have a 2-background div arrangement, A is always to be shown within the element and B is toggled according its buttonc control click.

HTML

<div class="container"></div>

CSS

 .container{
  url(B.png) 10px 10px no-repeat, 
   url(A.png) 600px 10px no-repeat,  
  }

JQUERY

$('.container').on('click', function(){

     //$(this).css("background","A.png")? add/removeClass?
  });

How Can I get this?

Upvotes: 1

Views: 935

Answers (2)

Temani Afif
Temani Afif

Reputation: 272947

You can play with background-size to show/hide one of the background-image:

$('.container').on('click', function() {
  $(this).toggleClass('hide');
});
.container {
  width:400px;
  height:200px;
  background-image: 
  url(https://lorempixel.com/300/200/), 
  url(https://lorempixel.com/350/200/);
  background-size: cover;
  background-repeat: no-repeat;
}

.hide {
  background-size: 0 0, cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

Upvotes: 4

Sphinx
Sphinx

Reputation: 10729

If I understand correctly, you'd like show one image as default background, then toggle the other one.

My idea:

  1. Create another css class name = extra-background, put Image A into .container, then put Image B into .extra-background.

  2. When click, toggleClass('extra-background')

$('.container').on('click', function(){
   $(this).toggleClass("extra-background");
});
.container{
 background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Vue.png/215px-Vue.png") #00D no-repeat fixed;
  width:400px;
  height:400px;
}

.extra-background{
 background: url("https://upload.wikimedia.org/wikipedia/en/thumb/c/c9/VueCinemas.svg/1200px-VueCinemas.svg.png") #00D no-repeat fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">Test</div>

Upvotes: 0

Related Questions