xarxaprod-wp-theme/sass/base/elements/_body.scss

body {
  background: $color__background-body; // Fallback for when there is no custom background color defined.
  //background-image: url(./assets/img/background-colors-02.jpg);
  //background-size: cover;
  //background-position: center center;
  //background-repeat: no-repeat;
  position: relative;
  &.admin-bar { //if else breaks the WordPress inline styles when front end editing
    position: inherit;
  }
}
.liquid-bubbles {
	overflow: hidden;
	float: left;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1000;
	width: 100vw;
	height: 100vh;

}
@keyframes bubble-move {
	from {
		width: 40vw;
    height: 40vw;
	  filter: blur(10rem);
	 /* transform: rotate(0);*/
	}
	to {
		width: 90vw;
		height: 20vw;
	  filter: blur(20rem);
	 /* transform: rotate(5deg);*/
	}
}
.bubbles {
	--size: 40vw;
	--position: -5vw;
  filter: blur(20rem);
	position:absolute;
	width: var(--size);
	height: var(--size);
	border-radius: 20%;
	background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
	//animation: 4s ease-in-out 4s infinite alternate bubble-move;
	&.bubble-01{
	  top: var(--position);
	  left: var(--position);
	  --bgcolor: var(--bubble-color-01);
		//--bgangle: to bottom right;
		--bgangle: 135deg;
	  animation: 5s ease-in-out 2s infinite alternate bubble-move;
	}
	&.bubble-02{
	  top: var(--position);
		right: var(--position);
	  --bgcolor: var(--bubble-color-02);
		//--bgangle: to bottom left;
		--bgangle: 225deg;
	  animation: 3s ease-in-out 0s infinite alternate bubble-move;
	}
	&.bubble-03{
		bottom: var(--position);
	  left: var(--position);
	  --bgcolor: var(--bubble-color-03);
		//--bgangle: to top right;
		--bgangle: 45deg;
	  animation: 2s ease-in-out 3s infinite alternate bubble-move;
	}
	&.bubble-04{
		bottom: var(--position);
		right: var(--position);
	  --bgcolor: var(--bubble-color-04);
		//--bgangle: to top left;
		--bgangle: 325deg;
	  animation: 4s ease-in-out 1s infinite alternate bubble-move;
	}
}