change body background image property using JQuery

Question

i want to change my background image with fadeIn and fadeOut effect. i can change it using this code but i can't use fadeIn and fadeOut effect. how can i use this effects? i mean last background should have fadeOut effect and next background should have fadeIn effect.
note: background property is part of body and i don't want my elements in body take fadeIn OR fadeOut effect. jquery:

$(document).ready(function(){
    setInterval(function () {
        $("body").css("background", "url(../img/2.jpg) center center no-repeat");
        $("body").css("background-size", "cover");
    }, 3000);
});

css:

body{
    background: url(../img/1.jpg) center center no-repeat;
    background-size: cover;
}

If you can change the DOM structure, please consider @mccambrige answer, as there is no way to do that. If you can not change the DOM structure AND if you only have 2 or 3 background images to play with, you could also use `:before` and `:after` selector of the body (knowing these selector can not be directly accessed through Jquery) https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — PIIANTOM, Jun 29 '18 at 14:42
https://stackoverflow.com/questions/6502157/transparent-background-image/6502295#6502295 — PIIANTOM, Jun 29 '18 at 14:48

score 0 · Answer 1 · answered Jun 29 '18 at 14:18

<body>
    <div class="background">
         <!-- the rest of your existing body contents -->
    </div>
</body>

This is more of a conceptual answer. But if you tuck a div between your body tag and the rest of your current website, attach the background to that div and manipulate it that way, you'll have better results. You'll just have to figure out how to position your content over top of that div.background. Just make sure the background div is full width, height, etc. Hack on that for a while. I bet you'll figure out the rest.

change body background image property using JQuery

1 Answers1