<div id="container-div">
  <img id="background-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/kts_demo_change_bg.svg">
  <img id="red-flower" class="animated" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/kts_demo_flower_red.svg">
  <img id="large-leaf" class="animated" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/kts_demo_leaf.svg">
</div>

#container-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* background: lightgray; */
}

#background-img {
  position: absolute;
  opacity: 0.666;
  width: 100%;
  height: 100%;
}

.animated {
  position: absolute;
  opacity: 0.66;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s; 
}

#red-flower {
  width: 10%;
  top: 36.3%;
  left: 65.6%;
  animation-name: twist;
}

#large-leaf {
  width: 13%;
  top: 55.5%;
  left: 64.3%;
  animation-name: twist;
}



/*** ANIMATIONS ***/



@keyframes twist {
  0%   { transform: rotate( -10deg ); }
  50%  { transform: rotate( 10deg ); }
  100% { transform: rotate( -10deg ); }
}

// responsive scaling

var containerDiv = document.getElementById("container-div");

function scaleToWindow() {
  if (window.innerWidth > window.innerHeight) {
    containerDiv.style.width = window.innerHeight*0.8+"px";
  } else { 
    containerDiv.style.width = window.innerWidth*0.8+"px";
  }
  containerDiv.style.height = containerDiv.style.width;
}

scaleToWindow();

window.addEventListener('resize', scaleToWindow);