How can I load a background-image smoothly with CSS or Javascript/jQuery?-CodePudding

I just want to make a body background image load (fade in) smoothly from the background color. I have a background color white or transparent, and I want to make appear a background image with its properties (size cover or any, repeat or not) with a transition.

I searched a lot in this forum but all people ask for changing backgrounds or other things with backgrounds, or for divs and not for body...

Till now I have only the background image set:

body {
  background: url(../img/back350llll.jpg);
  background-repeat:repeat;
}

and I would like to do it appear in 2 seconds maybe if possible with CSS or JavaScript, or jQuery...

CodePudding user response：

I think you can make it with CSS3 using @keyframes.

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
body {
  background-image: url('img_url');
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 10s linear infinite alternate;
}

CodePudding user response：

My solution would be first to add this to your css file:

body {
  background: url(../img/back350llll.jpg);
  background-repeat:repeat;
  backdrop-filter: contrast(0%) brightness(2);
  transition: backdrop-filter 2s;
}

Then in your JavaScript, add:

window.addEventListener('load', (event) => {
  document.body.style.backdropFilter = ""
});

You're stuck with white using this solution, but since you said white is your goal, it might do the trick for you.

If you want black, change brightness(2) to brightness(0)