1

I am trying to get a full-width css3 animation which animates the background. This works fine as long as the height of the body stays at the viewport height. If the content changes and the user needs to scroll, the animation breaks at the bottom:

Image

I already tried to change the css styles of html and body according to some tutorials and ended up with this:

I also tried to set body to 100vh but I think the problem is with the animation itself not scaling properly.

The css for the animation is this:

html {
  height: 100%;
}
body {
  min-height: 100%;
}

.rememberly-animation {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, #5e9793);
  -webkit-animation: rememberly-background 30s ease infinite;
  -moz-animation: rememberly-background 30s ease infinite;
  animation: rememberly-background 30s ease infinite;
}

@-webkit-keyframes rememberly-background {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}

@-moz-keyframes rememberly-background {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}

@keyframes rememberly-background {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}
<html>
  <body class="rememberly-animation">
  </body>
</html>

The class .rememberly-animation is added to the body-tag.

I somehow need the animation to scale the full height if the viewport (the content) is changing and the user needs to scroll down.

Any hints on this?

SuperDJ
  • 7,488
  • 11
  • 40
  • 74
NKnuelle
  • 234
  • 2
  • 19
  • Have you tried `background-size: 100% auto`? This would set the background image to 100% width, regardless of height – elveti May 08 '19 at 10:06
  • That is not working because it is no background image. The animation is the background. – NKnuelle May 08 '19 at 10:12
  • you don't have to add `height` to `html` and `body` tag, it is working fine, even if content is in scroll. please check below answer. – Amarjit Singh May 08 '19 at 10:19

1 Answers1

1

This is due to background propagation and your background is moving to the html that you have set to be height:100%.

Here is to illustrate the issue:

html {
  height:50px;
}
body {
  height:100px;
  border:2px solid;
  margin:0;
}

body {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, red);
  animation: rememberly-background 30s ease infinite;
}



@keyframes rememberly-background {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

Note how the background is strangely repeating each 50px inside the whole document and not only the body.

To avoid this add a background to the html element:

html {
  height:50px;
  background:#fff;
}
body {
  height:100px;
  border:2px solid;
  margin:0;
}

body {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, red);
  animation: rememberly-background 30s ease infinite;
}



@keyframes rememberly-background {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

Your final code can be:

html {
  background:#fff;
}
body {
  min-height:100vh;
  margin:0;
}

body {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, #5e9793);
  animation: rememberly-background 30s ease infinite;
}



@keyframes rememberly-background {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}
<div style="height:150vh;">to add scroll</div>

From this you are having another issue explained here: Using percentage values with background-position on a linear gradient

You have to specify a background-size for the animation to work

html {
  background:#fff;
}
body {
  min-height:100vh;
  margin:0;
}

body {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, red);
  background-size:200% 200%;
  animation: rememberly-background 3s ease infinite;
}



@keyframes rememberly-background {
    0%,100% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • It is working fine even if we do not add height to body. please try that – Amarjit Singh May 08 '19 at 10:17
  • @AmarjitSingh no it's not working fine. remove all the content from the body and you will see the issue – Temani Afif May 08 '19 at 10:21
  • @AmarjitSingh keep that code and use this gradient `linear-gradient(to bottom,red,blue);` then see – Temani Afif May 08 '19 at 10:24
  • Thanks for your detailed answer @TemaniAfif - It's working perfectly now. The main issue seems to be the background-size value. – NKnuelle May 08 '19 at 10:25
  • @AmarjitSingh are you sure? you see a red on the top and blue one the bottom or a lot of stripes or red/blue? I guess the last one thus the issue I am explaining – Temani Afif May 08 '19 at 10:27
  • i just added the colors and it is working ! you can check pen again – Amarjit Singh May 08 '19 at 10:29
  • @AmarjitSingh use this `linear-gradient(to bottom,red,blue);` don't keep the 41deg ;) .. with 41deg you will have an optical illusion and you cannot notice this – Temani Afif May 08 '19 at 10:30
  • @AmarjitSingh so it's not working and that's what I am explaining here ;) – Temani Afif May 08 '19 at 10:32
  • Yes, but even if you don't add `height` to body it will work same way ;) – Amarjit Singh May 08 '19 at 10:37
  • @AmarjitSingh the height is what the OP is using. I didn't decide to use height. The OP did and this what created the issue, and I never talked about height. It's all about background and the solution is to add another background to html whatever the height of the body which is irrelevant. – Temani Afif May 08 '19 at 10:45
  • @TemaniAfif it is just a suggestion nothing else, you explained really well and i really like that. I think we all can input our ideas to make a better world :) – Amarjit Singh May 08 '19 at 10:48