0

For duplicating alerts, please read the whole question. I AM NOT SEARCHING FADING TRANSITION IMAGE BACKGROUND ON A DIV. What i want is a fading transition of the whole body background-image when clicking one of the buttons as show in the snippet. Making a wrapping div could be a solution, but not the answer for this question.

There are many answers for fading background-images on div but not on the whole body.

There are some negative answers from 2010, i guess there will be something new around. And similar questions with no answer at all,

I´ve got a good solution for fading the body background-color using jquery-ui.js. But doesn´t work with background-images.

Adding -webkit-transition: background 1000ms ease-in-out 200ms; in each CSS class does the effect, but just on Chrome:

jsfiddle

Here is the example:

$("#btn1").click(function() {
 $('body').removeClass();
});

$("#btn2").click(function() {
 $('body').removeClass();
});

$("#btn3").click(function() {
 $('body').removeClass(); 
});
body {align-items: center;
justify-content: center;
text-align: center;
}
body.class1 {
background-image: url(https://1.bp.blogspot.com/-10uYQ232GmA/VB2cCRa0pDI/AAAAAAAAGgw/m9nRdE1d-Rg/s1600/checkerboard-tile-pattern.jpg);
background-repeat:repeat;
}
body.class2 {
background-image: url(http://www.subdude-site.com/WebPages_Local/RefInfo/Computer/WebDev/WebPageTiles/tilesTiles/tile_pattern_marbleTiles_bright_green_256x256.jpg);
background-repeat:repeat;

}
body.class3 {
background-image: url(https://4.bp.blogspot.com/-mCCWT2Qsqe4/UhHnOaJW7KI/AAAAAAAAFRo/4FHJyJdAeko/s1600/glossy-blue-ceramic-tiles-pattern.jpg);
background-repeat:repeat;

}
button {padding: 15px 32px;
margin: 80px 10px;
font-size: 16px;
border-radius: 12px;
border: 2px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="class1">
<button id="btn1">01</button>
<button id="btn2">02</button>
<button id="btn3">03</button>
</body>
Aspid
  • 113
  • 8
  • Why do you ask the same Question again? What Answer are you expecting that is different from previous answers to the inquiry? – guest271314 Nov 05 '17 at 01:17
  • Because the other question was marked as duplicate with two wrong answers – Aspid Nov 05 '17 at 01:18
  • What do you mean by "wrong answers"? What effect are you expecting to achieve that the answers at previous Questions do not? – guest271314 Nov 05 '17 at 01:20
  • https://stackoverflow.com/questions/30388118/trying-to-make-multiple-background-images-cycle-through-a-slideshow-with-css-and This is on a div – Aspid Nov 05 '17 at 01:20
  • How is current Question different? – guest271314 Nov 05 '17 at 01:21
  • https://stackoverflow.com/questions/45497493/background-image-fade-out-in-jquery This is different answer than my question – Aspid Nov 05 '17 at 01:22
  • If you mark my question as duplicate i will not get any answer – Aspid Nov 05 '17 at 01:23
  • You have not described what effect you are expecting that is different from the effects rendered at answers to previous questions – guest271314 Nov 05 '17 at 01:24
  • 1
    _"If you mark my question as duplicate i will not get any answer"_ - well imposing arbitrary restrictions to possible solutions is not going to increase the likelihood someone is going to bother to find you a new one ... _"Making a wrapping div could be a solution, but not the answer for this question"_ - then first of all explain why this would not be an option, please. – CBroe Nov 05 '17 at 01:26
  • See also [How can I make an image carousel with only CSS?](https://stackoverflow.com/questions/30295085/how-can-i-make-an-image-carousel-with-only-css/) – guest271314 Nov 05 '17 at 01:26
  • _"Adding -webkit-transition: background 1000ms ease-in-out 200ms; in each CSS class does the effect, but just on Chrome"_ - that is most likely because background-image is not one of the properties _specified_ as being transition-able ... https://www.w3.org/TR/css3-transitions/#animatable-properties If Chrome wants to implement it as such nevertheless, doesn't mean other browsers have to follow suit. – CBroe Nov 05 '17 at 01:29

0 Answers0