html - 親背景上の特定の要素への配置

Question

HTML5/CSS3で端末に依存しないアニメーションを作りたいです。つまり、エッジを切り取ることができるように特別に描画された背景画像があり、次のようにdiv要素で使用しています。background-size: cover

#main-image {
  background: url(intro1-1.jpg) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

#propeller {
  background: url(propeller2.png) no-repeat;
  position: relative;
  top: 265px;
  left: 1080px;
  z-index: 10;
  background-size: 100% 100%;
  width: 18%;
  height: 12%;
}

<div id="main-image"><div id="propeller"></div></div>

背景レイヤーの上に、アニメーションレイヤーを描きたいです。ここで問題が発生します。透明なアニメーション部分を完全な (スケーリングされていない) 背景画像の特定の位置に配置するにはどうすればよいですか?

また、背景がスケーリングされたのと同じ比率を使用して、アニメーション レイヤーをスケーリングする必要があります。しかし、どうすればそれを行うことができますか？

実際には、HD 背景画像を読み込み、その上に HD アニメーション レイヤーを定義し、ブラウザ画面全体に適用する方法を探しています。cover

これを行う最も簡単な方法は何ですか?