$(".on").click(function() { $(".main").toggleClass("main__night"); }); 
 .main { background: url(../img/daybackground.png) no-repeat center top; } .main__night { background: url(../img/nightbackground.png) no-repeat center top; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main" id="main"></div>

2 answers 2

If possible, you can use one picture, consisting of two.
For example, like this:

----

And there we are already changing the background-position .
Below is an example:

 $('input[type="button"]').on('click', function(){ $('.block').toggleClass('active'); }); 
 .block { display: block; width: 225px; height: 150px; background: url('https://i.stack.imgur.com/FpEZQ.png') no-repeat top center / auto 200%; } .block:not(.active) { background-position: top center; } .block.active { background-position: bottom center; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="block"></div> <input type="button" value="toggle">

    Shrink the picture. Judging by the fact that you have png, it weighs too much and loads for a long time. Here is an example with the usual jpg - your code works great, without any white frames:

     $(".on").click(function(){ $(".main").toggleClass("main__night"); }); 
     div { height: 600px; } .main { background: url(https://avatars.mds.yandex.net/get-pdb/33827/eb1233b6-e0c6-4025-b5f9-d9c0b163fcae/s1200) no-repeat center top; } .main__night { background: url(https://avatars.mds.yandex.net/get-pdb/989257/686ff985-8427-41f2-820a-f1280233f97c/s1200) no-repeat center top; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="on">click</button> <div class="main" id="main"> </div>