How to change background image with jQuery

Question

I am using jQuery to change the background image of a page. At the moment I am using two different buttons which switch the image from Image A to Image B. Image A is shown by default.

What I would like to achieve is to change the image with a single button which changes name when clicked.

So for Image A the button should just say Zoom In and when clicked, Image B is shown in the background but the button will say Zoom Out.

Apologies if I've not explained it clearly.

jQuery(document).ready(function() {
   var images = ['image-A.gif'];

   var url = images[Math.floor(Math.random() * images.length)];
  var img = new Image();
  img.onload = function(){
    jQuery('#test').css({'background-image': 'url('+url+')','background-size' : 'cover', 'background-position' : '50px 0'});
jQuery('#test').fadeIn(1000);
  }
  img.src = url;


});
  jQuery(function(){

jQuery("#aChange").click(function(){

    jQuery("#test").css("background-image", "url(image-B.gif)");
    jQuery("#test").css("background-position", "50px -100px");
    jQuery("#test").css("background-repeat", "no-repeat");
    jQuery("#test").css("background-size", "cover");

    return false;
});     

jQuery("#bChange").click(function(){

    jQuery("#test").css("background-image", "url(image-A.gif)");
    jQuery("#test").css("background-position", "50px 0");
    jQuery("#test").css("background-repeat", "no-repeat");
    jQuery("#test").css("background-size", "cover");

    return false;
});

});

Answer 1

If you set the classes .image1 { background-image:url("here") } and .image2 { background-image:url("here") } in CSS

then apply one to the background element, you could just toggle between the two like this

$('#theButton').click(function(){
    $('#background').toggleClass('image1').toggleClass('image2');
});

also, did you know you could have all of those .css functions on one "line"?

$('.this').css({
    'color':'green',
    'border':'1px solid black',
    'position','absolute'
});

You're missing the point of jQuery if you're coding like that

Answer 2

Try this. Have only one button with the id aChange .

 jQuery(function() { jQuery('#aChange').click(function() { var text = jQuery('#aChange').val(); if (text == "Zoom In") { jQuery("#test").css("background-image", "url(image-B.gif)"); jQuery("#test").css("background-position", "50px -100px"); jQuery("#test").css("background-repeat", "no-repeat"); jQuery("#test").css("background-size", "cover"); } else { jQuery("#test").css("background-image", "url(image-A.gif)"); jQuery("#test").css("background-position", "50px 0"); jQuery("#test").css("background-repeat", "no-repeat"); jQuery("#test").css("background-size", "cover"); } jQuery('#aChange').val(text == "Zoom In" ? "Zoom Out" : "Zoom In"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="aChange" type="button" value="Zoom In"> 

Answer 3

$('.Zoom').click(function(){
    var $this = $(this);
    $this.toggleClass('Zoom');
    if($this.hasClass('Zoom')){
        $this.text('Zoom'); 
        $("html").css("background-color","yellow");
    } else {
        $this.text('Zoom Out');
        $("html").css("background-color","green");
    }
});

If I understood well, this may help you. Check it out: http://jsfiddle.net/V4u5X/703/

Answer 4

You could do this with minimal jQuery and a bit of CSS. See the following.

 $("button").on("click", function() { $("body").toggleClass("img2"); $(this).text(function(i, text) { return text.indexOf("In") !== -1 && "Zoom Out" || "Zoom In"; }); }); 

 body { width: 100%; height: 100%; background-image: url("http://news.bbcimg.co.uk/media/images/76132000/jpg/_76132132_z3551404-blue_morpho_butterfly-spl.jpg"); background-position: 50px 0; background-repeat: no-repeat; background-size: cover; } body.img2 { background-image: url("http://wallerz.net/wp-content/uploads/2014/10/4049_butterfly.jpg") } 

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