CODEWITHSUNDEEP
htmlcsscss-animationsweb-deploymentanimista
Sravan SS
Sravan SS

Reputation: 79

How can I animate Background Image of body wth css

below is my css animation(actually copied from Animista)

@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}

body {
  background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-size: cover;
  background-position: center;
  color: white;
  font-family: "Open Sans", sans-serif !important;
}
<body></body>

I need to apply this to body background image

body {
  background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-size: cover;
  background-position: center;
  color: white;
  font-family: "Open Sans", sans-serif !important;
}

when I try to apply the animation everything inside the body is moving except the background image, please help me out here I am all new to these.

Upvotes: 0

Views: 6343

Answers (2)

BEORN
BEORN

Reputation: 111

As far as I know you can't add animation to background image. You have to simulate the way background image works and then add the animation to that image. I used CSS positioning to accomplish this. I didn't add your animations completely but you can add it as you like.

CSS:

body {
  color: white;
  font-family: 'Open Sans', sans-serif !important;
}
#bg-image {
  position: fixed;

  top: 0;
  right: 0;

  width: 100%;
  height: auto;

  z-index: -10;

  animation-name: kenburns-top;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}

and the body tag will be like:

<body>
<img
  id="bg-image"
  src="https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
/>

<h1>Web Page</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eligendi
  cupiditate non? Voluptas, in, deserunt quis expedita, laudantium suscipit
  ab sint amet quia dolorum illum saepe. Placeat libero enim dicta!
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium iure
  veritatis eligendi ipsa ad suscipit, quo illum ut rem incidunt eos rerum
  iusto repellendus voluptatibus saepe veniam ullam, quod vel?
</p>
</body>

Upvotes: 2

Warden330
Warden330

Reputation: 1042

Problem: you are changing the element-size not only the background. Whatever you do, changing the size of the body is mostly a pretty bad idea in a website.

So i give you 2 solutions, second one wont look as smooth tho sadly

So here is one example of a solution for your problem, i just made the animation go back and forth forever so you can see it better. Snippet: Workaround by setting up a div as background and another div as the content-area: 

@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}

body {
  width: 100vw;
  height: 100vh;
  background-color: red;
  color: white;
  font-family: "Open Sans", sans-serif !important;
}
/*Just the background-image*/
.content-background {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-size: cover;
  background-position: center;
  animation-name: kenburns-top;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}
/*The div where the real content is in*/
.content {
  width: 100%;
  height: 100%;
  /*color and opacity just to make it visible to better explain*/
  opacity: 0.2;
  background-color: blue;
}
<body>
 <div class="content-background">
 </div>
 <div class="content">
  <h1>As you can see now only the image changes, body and content stay</h1>
 </div>
</body>
Solution 2: When you have to apply the background image to the body and still want an animation:

@-webkit-keyframes kenburns-top {
      0% {
          /*manipulate background-size with the animation isntead*/
          background-size: 50% 50%;
          
      }
      100% {
        background-size: 100% 100%;
      }
    }

    body {
      width: 100vw;
      height: 100vh;
      background-color: red;
      color: white;
      font-family: "Open Sans", sans-serif !important;
      background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
      background-position: center;
      /*removed background-size*/
      /*add no-repeat rule*/
      background-repeat: no-repeat;
      animation-name: kenburns-top;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-direction: alternate-reverse;
    }
    /*The div where the real content is in*/
    .content {
      width: 100%;
      height: 100%;
      /*color and opacity just to make it visible to better explain*/
      opacity: 0.2;
      background-color: blue;
    }
    <body>
     <div class="content">
      <h1>As you can see now only the image changes,content stays</h1>
     </div>
    </body>

Upvotes: 1

Related Questions