1390995111 GIFアニメーションとJPG画像を重ねて表示させる方法について、教えてください。

XHTML1.0でホームページを作成しました。
一部にgifアニメーションを入れるのですが、画像のサイズが大きいので、GIFアニメーションを作った時にサイズが大きくなってしまいました。
少しでも軽くしたいので、画像を動く部分と動かない部分に分けたのですが、重ねて表示する方法がうまく出来なくて困っています。
画像は上下左右の中央で揃える、ページを開いた時に左右は中央に表示するようにしたいです。
ページのイメージは画像のようにしたいのですが、どなたか教えてください。
わかりやすく教えていただけると助かります。お願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/01/29 20:31:51
  • 終了:2014/02/05 15:45:20

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4488ベストアンサー獲得回数18572014/01/29 22:52:43

こんな感じで、どうでしょうか。

<style>
BODY {
    margin: 0;
    padding: 0;
}
/* 外側の JPEG */
.back {
    height: 900px;          /* 高さを画像にあわせる */
    background-image: url(jpeg_image.jpg);  /* JPG 画像の URL */
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid red;
    position: absolute;
    width: 100%;
}
/* 内側の GIF */
.anime {
    position: absolute;
    top: 50%;
    margin-top: -400px;     /* 画像の高さの半分 */
    left: 50%;
    margin-left: -325px;    /* 画像の幅の半分 */
    display: block;
    border: 1px solid red;
}
/* 日付を表示する領域 */
.time-area {
    width: 100%;
    padding: 0 auto;
    padding-top: 10px;      /* 高さ方向の位置を調整 */
}
</style>

<body>

<div class="back">  <!-- JPEG を表示するエリア -->
<center class="time-area">  <!-- 日付を表示するエリア -->
<script>
/* 日付を書くスクリプト */
document.write("2014年1月29日");     /* 本当は、画像で表示するところです */
</script>
</center>
<img class="anime" src="animation_gif.gif" />   <!-- アニメーション GIF -->
</div>

</body>

画像のサイズに依存した数値を三つほど書いちゃってるのが、イマイチなんですが。

id:nashie0306

ありがとうございます。
position: absolute;を使った時の他の要素の指定をうまくしないとダメなんですね。勉強になります。

2014/02/01 13:42:55

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません