Question 37275 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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…

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search