教えてください。
背景画像img-bg.jpgにネコの画像cat.pngを乗せて、ネコに目の画像catseye.pngを重ねてアニメーションanimated tadaを右目と左目で動かしたいのですが、きちんと目を定位置に重ねることができません。レスポンシブで画面の大きさを変えると微妙にずれてしまいます。
あと、目の大きさも画面の大きさに伴って拡大縮小されず、大きさが変わりません。
背景画像とネコ画像はキチンとレスポンシブ対応されているので目の画像をきちんと重ねて、目の大きさもレスポンシブ対応になるようCSSコードの修正箇所を教えてください。
当方、初心者でググリながらコードをコピーしていますのでメチャクチャのコードだと思いますが、わかりやすく教えていただけると助かります。
何卒ご教授お願いいたします。
HTML
<section id="intro" class="intro"> <div class="cat"><img src="img/cat.png"> <div id="catseye-l" class="animated tada"><img src="img/catseye.png"></div> <div id="catseye-r" class="animated tada"><img src="img/catseye.png"></div> </div> <div class="slogan"> <h1><div class="animated pulse"><img src="img/job-like-logo500.png"></div></h1> <p>アイウエオカキクケコ</p> <a href="#about" class="btn btn-skin scroll">くわしくはコチラ</a> </div> </section> <!-- /Section: intro --> コード
CSS
#intro{ background: url(../img/img-bg.jpg) right bottom no-repeat; height: 0; padding-bottom: 58.53%; background-size: contain; margin:25px 0 0 0; z-index:1; } .cat{ position:relative; width:70%; height:auto; margin:0 auto; } .cat img{ position:relative; width:100%; height:auto; margin:0 auto; z-index:2; } #catseye-l{ position:absolute; max-width:100%; height:auto; left:24%; top:8%; } #catseye-r { position:absolute; max-width:100%; height:auto; left:50%; top:7%; } コード
回答1件
あなたの回答
tips
プレビュー