Animated CSS Blobs as Background Not Responsive

Question

I have some blobs that are animated as a background for my webpage but the problem is that they are overflowing on the page causing my content to not be responsive. I have tried adding position: relative and position: absolute as well as overflow:hidden but nothing seems to work. Here is the code I have and I appreciate any help I can receive!

.shapes {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.shape:nth-of-type(1) {
  width: 637.96px;
  height: 539.24px;
  position: absolute;
  left: -5%;
  top: 20%;
  background: #befae1;
  animation: wave 8s ease-in-out infinite;
}

.shape:nth-of-type(2) {
  width: 700px;
  height: 700px;
  background: #f0f0ff;
  position: absolute;
  top: 80%;
  left: 0%;
  animation: wave 5s ease-in-out infinite;
}

.shape:nth-of-type(3) {
  width: 500px;
  height: 500px;
  background: #feee85;
  position: absolute;
  top: 35%;
  right: 15%;
  animation: wave 12s ease-in-out infinite;
}

.shape:nth-of-type(4) {
  width: 450px;
  height: 350px;
  background: #facdcd;
  position: absolute;
  top: 75%;
  right: -5%;
  animation: wave 6s ease-in-out infinite;
}

.shape:nth-of-type(5) {
  width: 350px;
  height: 350px;
  background: #bfabff;
  position: absolute;
  top: 115%;
  right: 25%;
  animation: wave 15s ease-in-out infinite;
}

.shape:nth-of-type(6) {
  width: 900px;
  height: 900px;
  background: #00c8af;
  position: absolute;
  top: 230%;
  left: -25%;
  transform: rotate(90deg);
  animation: wave 15s ease-in-out infinite;
}

.shape:nth-of-type(7) {
  width: 700px;
  height: 700px;
  background: #facdcd;
  position: absolute;
  top: 230%;
  left: 25%;
  animation: wave 5s ease-in-out infinite;
}

.shape:nth-of-type(8) {
  width: 450px;
  height: 350px;
  background: #fab4ff;
  position: absolute;
  top: 230%;
  left: 45%;
  animation: wave 6s ease-in-out infinite;
}

.shape:nth-of-type(9) {
  width: 637.96px;
  height: 539.24px;
  position: absolute;
  top: 255%;
  right: -5%;
  background: #befae1;
  animation: wave 8s ease-in-out infinite;
}

.shape:nth-of-type(10) {
  width: 350px;
  height: 350px;
  background: #bfabff;
  position: absolute;
  top: 300%;
  right: 15%;
  animation: wave 15s ease-in-out infinite;
}

@keyframes wave {
  0%,
  100% {
    border-radius: 66% 34% 37% 63% / 57% 31% 69% 43%;
  }
  50% {
    border-radius: 26% 74% 51% 49% / 22% 53% 47% 78%;
  }
}

user_10179415 · Answer

body {
  position: relative; 
  margin: 0;
  min-height: 100vh;
}

.shapes {
  position: absolute;
  height: 100%; width: 100%;
  overflow: hidden;
}

.shape { position: absolute; }

.shape:nth-of-type(1) {
  top: 20%; left: -5%;
  height: 539.24px; width: 637.96px;
  background: #befae1;
  animation: wave 8s ease-in-out infinite;
}
.shape:nth-of-type(2) {
  top: 80%; left: 0%;
  height: 700px; width: 700px;
  background: #f0f0ff;
  animation: wave 5s ease-in-out infinite;
}
.shape:nth-of-type(3) {
  top: 35%; right: 15%;
  height: 500px; width: 500px;
  background: #feee85;
  animation: wave 12s ease-in-out infinite;
}
.shape:nth-of-type(4) {
  top: 75%; right: -5%;
  height: 350px; width: 450px;
  background: #facdcd;
  animation: wave 6s ease-in-out infinite;
}
.shape:nth-of-type(5) {
  top: 115%; right: 25%;
  height: 350px; width: 350px;
  background: #bfabff;
  animation: wave 15s ease-in-out infinite;
}
.shape:nth-of-type(6) {
  top: 230%; left: -25%;
  height: 900px; width: 900px;
  background: #00c8af;
  transform: rotate(90deg);
  animation: wave 15s ease-in-out infinite;
}
.shape:nth-of-type(7) {
  top: 230%; left: 25%;
  height: 700px; width: 700px;
  background: #facdcd;
  animation: wave 5s ease-in-out infinite;
}
.shape:nth-of-type(8) {
  top: 230%; left: 45%;
  height: 350px; width: 450px;
  background: #fab4ff;
  animation: wave 6s ease-in-out infinite;
}
.shape:nth-of-type(9) {
  top: 255%; right: -5%;
  height: 539.24px; width: 637.96px;
  background: #befae1;
  animation: wave 8s ease-in-out infinite;
}
.shape:nth-of-type(10) {
  top: 300%; right: 15%;
  height: 350px; width: 350px;
  background: #bfabff;
  animation: wave 15s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% { border-radius: 66% 34% 37% 63% / 57% 31% 69% 43%; }
  50% { border-radius: 26% 74% 51% 49% / 22% 53% 47% 78%; }
}

Animated CSS Blobs as Background Not Responsive

1 Answers