CODEWITHSUNDEEP
csscss-animations
NKnuelle
NKnuelle

Reputation: 282

CSS3 full-width background animation if body height changes

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?

Upvotes: 1

Views: 312

Answers (1)

Temani Afif
Temani Afif

Reputation: 273990

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%
    }
}

Upvotes: 1

Related Questions