• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:背景画像の上にGIF画像をのせたいのですが、)

背景画像の上にGIF画像をのせたい|初心者のHP作成方法

このQ&Aのポイント
  • 背景画像の上にGIF画像を表示させる方法として、HTMLコードを使用することで実現できます。
  • ただし、画面サイズが異なる場合には表示がずれる可能性があります。
  • 表示を安定させるためには、背景画像の位置指定や画像のサイズ指定を調整する必要があります。

質問者が選んだベストアンサー

  • ベストアンサー
  • Safe_Mode
  • ベストアンサー率48% (1329/2725)
回答No.1

基本的に背景画像とGIF画像の位置関係の解釈と指定の仕方を理解されてないように思います。 背景画像は常に横方向をセンターにしているのに、GIF画像の方は画面に対して右から400px入ったところという指定なので、家のPCでは上手く表示されたと思われてますが、ブラウザ画面の幅を変えたとたんにずれてしまうはずです。 これを解消するなら、背景画像も、GIF画像も両方とも左右をセンター指定して、GIF画像の方を上、左のマージンで調整するといったことを考えたほうがいいでしょう。 参考にソースを書いておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>このページにふさわしいタイトルを入れる</title> <style type="text/css"> <!-- body{ width:1295px; background-color:#000000; background-image:url(http://runarunatic.yumenogotoshi.com/20110716181031ymv.png); background-attachment:fixed; background-repeat:no-repeat; background-position :center top; } img{ border:0; position:absolute; top:0%; left:50%; margin-top:300px; margin-left:50px; } --> </style> </head> <body> <a href="http://runarunatic.yumenogotoshi.com/t.index.html"><img src="http://runarunatic.yumenogotoshi.com/simpleVC_img/bani.gif" width="26" height="39" alt="○○へ"></a> </body> ついでに・・・ 「DOCTYPE宣言」、<html></html>、<head></head>、<body></body>などの基本的な タグの使い方もあまり理解されてないようなので、先ずはタグの使い方の基本と、スタイルシートの使い方の基本を勉強されたほうがいいかと思いますよ。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 2つ画像を背景にするスタイルシートってある?

    1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか?下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか? <STYLE TYPE="text/css"> <!--    BODY {       background-image:素材のURL;       background-position:0% 100%;       background-repeat:no-repeat;       background-attachment:fixed;     } --> </STYLE>

    • 締切済み
    • CSS
  • スタイルシートと、背景色の設定について

    画像を画面の中心に表示させようと、以下の様に設定したら、背景色が白になってしまうのです。 この場合どのようにすれば、背景を黒く設定できるのでしょうか? 画像の背景が黒なので困っています(涙 <head> <style type="text/css"> <!-- body{background:fixed url(***.gif) no-repeat 50% 50%} --> </style> </head> <BODY bgcolor="#000000"> 宜しくお願いします。。。

    • ベストアンサー
    • CSS
  • アクセス毎に変わる画像のタグを背景で使いたい

    アクセス毎に画像が変わるタグを使って背景画像を毎回変えたいです。 それを使って <Style Type="text/css"> <!-- body { background-repeat:repeat-y; } --> </Style> これと併用したいのですが、うまく行きません。 何か対策があったらおしえてください!お願いします !

    • ベストアンサー
    • HTML
  • 両端に背景画像を入れる

    画面の左右両端に、縦に繰り返しで、画像を背景として入れたいのですがどうすればよいのでしょうか? <STYLE type="text/css"> <!-- BODY { background-image : url("~~.gif"); background-position: left; background-repeat: repeat-y;} --> </STYLE> スタイルシートを使って、とりあえず左にだけ入れることは出来ました。 このあとを教えてください。お願いします。

    • ベストアンサー
    • HTML
  • 背景画像の折り返しをしたい

    背景画像を横に折り返したいのですが、下のタグを打つと、ドキュメントウインドウでは表示されるのですが、ブラウザで見ると何も表示されません。 画像の格納場所は、あっているはずですが、どこが間違っているのかわかりません。。。 dreamweaver MX、ブラウザはIE6.0を使用しています。 手打ちで行ったのですが、DREAMWEAVERの操作でできるのであれば、その方法も知りたいです。 お手数ですがどなた教えてください。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>上のフレーム</title> <STYLE type="text/css"> <!-- BODY{ background-image:url(/img/top/line2.gif); background-repeat:repeat-x; } --> </STYLE> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> </body> </html>

  • ホームページ作成

    背景を右下に設定する時は <style type="text/css"> <!-- body{ background-image: url(背景画像のURL); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom; } --> </style> を<head>から</head>までに書けばいいと書いてあったので <html> <head> <meta http-equiv="content-type" content="text/html; charset=EUC-JP"> <title>無題</title> <meta name="generator" content=" 6.0.0.49"> <style type="text/css"> <!-- body{ background-image: url(背景画像のURL); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom; } --> </style> </head> <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"> <p style="line-height:150%;">&nbsp;</p> </body> </html> と書きましたがダメでした。 どこが間違っていますか? またどうすれば直るか教えてください。 当たり前ですが、「画像URL」のところはちゃんとアドレスに置き換えました。

  • 背景を固定する。

    <HTML> <HEAD> <TITLE>・・・</TITLE> <STYLE TYPE="text/css"> <!-- BODY { background-image: url(画像のURL); background-repeat: no-repeat; background-position: right bottom; } --> </STYLE> </HEAD> <BODY> ・ ・ ・ </BODY> </HTML> このタグをいれても、背景が表示されず真っ白です。 何か間違ってるところがありますか?

  • 背景画像がNetscapeでは表示されない

    <HEAD>タグ内に下記の方法で背景画像を中央に表示させています。 IE5.5では正常に表示されますが、ネスケ4.7で確認すると背景画像のみ表示されません。 <BODY>タグ内の文字は正常に表示されます。 どうしたら良いでしょうか? <STYLE type="text/css"> <!-- table#base { background-image: url("img/bg.jpg"); background-repeat:no-repeat; background-position: center center; } --> </STYLE> 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 背景画像をウィンドウに合わせて動くようにしたいのですが

    WinXP ビルダー10を使用しています。 閲覧する人が任意の大きさにウィンドウサイズを変えた時にそれに合わせ背景画像が一緒にずずずっと移動する、というようにするようにしたいのですが(ウィンドウと磁石のようにくっついており、小さくしても背景画像の中心が画面に来る、という感じです)どうしたらよいのでしょうか?現在は背景画像が小さくするとそのまま見えなくなる状態です。 タグは以下になってます。 <HTML> <HEAD> <BASE target="_parent"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.0.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE>top</TITLE> <STYLE type="text/css"> <!-- </HEAD> </HTML> BODY{ background-color : black; background-image : url(****); background-repeat : no-repeat; background-attachment : fixed; } --> </STYLE> </HEAD> </HTML> 色々試したのですが…中々できません。 ご存知の方教えて下さい。宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 背景画像固定タグ

    こんばんは。 背景画像を右一列や左一列に固定をしたいのですが、今まで出来ていたのに何故か出来なくなってしまいました。 使用しているサーバーは2スタイルです。 画面全体に表示させることは出来ました。 <STYLE type="text/css"><!-- body{ background-image:url(アドレス); background-attachment:fixed; background-repeat:repeat-y; background-position:right;} --></STYLE> このタグで間違いはないと思うのですが表示できません。 HEADの間に入れています。 お力を貸してください。宜しくお願い致します。

このQ&Aのポイント
  • 2015年にNECメーカー製パソコンを購入し、Windows10にアップデートした後、システムドライブ(SSD)を別の筐体に移し替えたい。保証は切れているが、デジタルライセンスによる認証があるため、移植して認証することは可能か。
  • 購入したNECメーカー製パソコンをWindows10にアップデートし、現在はデジタルライセンスによる認証を受けている。しかし、システムドライブを新しい筐体に移し替えたいと考えている。保証は切れているが、移植しても認証は可能か。
  • NECメーカー製パソコンを購入し、Windows10にアップデートした後、保証期間が切れたが、デジタルライセンスによる認証を受けている。現在、システムドライブを別の筐体に移し替えたいと考えている。移植しても認証は有効か。
回答を見る

専門家に質問してみよう