• 締切済み

固定画像の右下に、ポイント画像を置くには?

お教えください。 今、FRONT PAGE EXPRESSを使用しつつ、タグページで書き込み調整をしております。 お聞きしたいのは、 「背景画像をスタイルシートで固定した上に、もう一つポイント画像を一つだけ右下に固定したい」 のですが、どのようにしたらよいのでしょうか? 現在、下記のような状態です。 <html> <head> <style type="text/css"> <!-- body { background-image : url('○○背景画像.gif'); background-repeat:no-repeat ; background-attachment : fixed; background-position : right up ;} a{text-decoration:none;}--> </style> <meta http-equiv="Content-Language" content="ja"> <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>△△</title> </head> ここにどのような手を加えると、右下に表示され、尚かつスクロール時も動かなくなるのでしょうか? 宜しく御願いします。

みんなの回答

  • nonchi
  • ベストアンサー率43% (16/37)
回答No.2

全体を幅100%・高さ100%のテーブルでくくって、テーブルの背景画像として、右下のポイント画像を表示してみてはどうでしょうか?

nono_ko
質問者

お礼

ありがとうございます。 テーブルがすでに左にあって、色まで付けてしまったんです(><) レイアウトとかもう一度考えてみます。 ありがとうございました。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

背景画像を2つ設定することはできません。 なので、できないと思います。 擬似的に、フレームを下部に作りそこの右に画像を表示するとかそういうことは、できると思います。 あと、背景を透過して、2つの画像を実際には、1つで作成するとかもあるかと思いますが・ 勘違いしてたらすみません

nono_ko
質問者

お礼

ありがとうございます。 やっぱりだめなんですね。 二つのポイント画像をそれぞれ止めておく方法とか考えたのですが、やはりうまくいかなくて……。 レイアウトを考え直してみます。 ありがとうございました。

関連するQ&A

  • ホームページ作成

    背景を右下に設定する時は <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」のところはちゃんとアドレスに置き換えました。

  • Safariで画像が出ません!

    WinXPにてHPを作っています。 WinではIE7、IE6、NN7、FireFox、Opera MacではIE、FireFox、Opera、Safari で動作・レイアウトの確認をしています。 何故かSafariのみ、以下のタグを入れたページの背景画像が出ず真っ白な画面になってしまいます。 どこに間違いがあるのかさっぱりわからないんです… ご存知の方、教えて頂けるとありがたいです!! 宜しくお願い致します。 タグ一覧↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <BASE target="_parent"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Imagetoolbar" content="no"> <meta name="robots" content="noindex, nofollow,noarchive"> <meta name="GOOGLEBOT" content="NOINDEX, NOFOLLOW, NOARCHIVE"> <TITLE>top</TITLE> <STYLE type="text/css"> <!-- BODY{ background-color : black; background-image : url("****.gif"); background-repeat : no-repeat; background-position:25% 0%; } --> </STYLE> </HEAD> </HTML>

    • 締切済み
    • CSS
  • 背景画像を固定したのに…ビルダーです。

    こんにちは。 いま、ホームページビルダー7でホームページをつくっています。 よく、写真などの画像を右上に固定してるサイトってありますよね?スクロールしても動かないという。それをしたくてタグを調べ、ためしにやってみたのですが、画像が繰り返してしまうのです。 私は、1枚の空の写真だけを右上に貼りたいのですが…。 タグは以下のとおりです。 ↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 HTML4.01 Frameset //EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 7.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY{ background-image : url(ファイル名.jpg); background-attachment : fixed; background-position : right top; background-repeat : no-repeat; } --> </STYLE> </HEAD> <BODY></BODY> </HTML> 一番不思議なのが、ビルダーで「繰り返さない」にチェックしているのになってしまっているということです。ただ画像が繰り返されてるのではなく、途切れ途切れに。 PC自身の問題なのでしょうか。 それと欲張ってもうひとつ。 スクロールバーの色をかえるタグをいれてみたのですが、ビルダー7では反映されないのでしょうか。まったくかわりません。 言葉で説明するのがどうも難くて…分かりづらくて申し訳ありません。お返事まっています。

  • 背景画像をウィンドウに合わせて動くようにしたいのですが

    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
  • 背景に指定したイメージ以外の余白を見せないようにする方法は?

    こんにちは!まさにタイトル通りの質問です。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <META NAME=""> <META NAME=""> <META NAME=""> <META NAME=""> <META http-equiv="refresh" content="5;url=test.html"> <SCRIPT LANGUAGE="JavaScript"> <!-- function resizeWindow(){      window.resizeTo(720,580);  } //--> </SCRIPT> <title>test</title> <style type="text/css"><!-- body { background-repeat:no-repeat;} --></style> </HEAD> <body onLoad="resizeWindow()" background="top4.jpg" width=720 height=580 > </body> </HTML> としていますが、窓を大きくしたりすると右や下に余白が見えてかっこわるいです。どうすれば改善しますか? お願いします☆

    • ベストアンサー
    • HTML
  • グラデーション背景と画像固定背景

    こんにちは。 ホームページ作成初心者の者なのですが、ページの背景をグラデーション背景の上に固定した画像背景を乗っけようと考えているのですが、グラデーション背景のタグを入れると画像背景のタグが無効になってしまいます。この二つを同時に有効にする事は不可能なのでしょうか。 ちなみにタグは <HEAD> <STYLE> <!--BODY { background-image : url(back2.gif) ; background-repeat : no-repeat ; background-position : 90% 90% ; background-attachment : fixed ;} --> </STYLE> <STYLE> <!-- body{ filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr='#68b4ff',endcolorstr='#ffffff',gradienttype='1') } --> </STYLE> (省略) </HEAD>

  • ご指摘下さい!どこが間違っているのか…窓の自動リサイズ法です。

    こんばんわ! いきなりですが、いろんな方にアドバイスをいただいて自分なりに 作ってみたのですが、窓の自動リサイズができません。 「更新」やこのページに飛んできたとき、などなど、 そのようなときに自動的に窓が720*580の大きさになるなどというのは もしかして不可能ですか? どなたか教えて下さい! <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <META NAME=""> <META NAME="" > <META NAME=""> <META NAME=""> < http-equiv="refresh" conten="5;url=test.html"> <SCRIPT LANGUAGE="JavaScript"> <!-- function resizeWindow(){      window.resizeTo(720,580);  } //--> </SCRIPT> <title>test</title> <style type="text/css"><!-- body { background-repeat:no-repeat;} --></style> </HEAD> <body onLoad="resizeWindow()" background="top4.jpg" width=720 height=580 > </body> </HTML>

  • ホームページの編集、更新、ソフトについて

    ホームページの編集、更新について Webの知識が殆どないのですがおしえてください。外国人の知人に日本語のホームページの更新を頼まれたのですが作成したのは面識なく連絡も取れない人なので困っております。 とりあえず多少の勉強は情報を集めて頑張るつもりで、当面は現状のテキスト部を一部差しかえたり、画像を差しかえたりができればいいと思っています。 作成時のソフトがなければというわけではないですよね? ですのでどうようなソフトを使用したら編集が可能になるかがわかればうれしいのですが。 ちなみに作業はMac OS Xでやるつもりです。 以下にHPのソースを一部貼ってみます。 <html> <head> <meta http-equiv="Content-Language" content="ja"> <title>*****レストラン *******</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <script src="js/AC_RunActiveContent.js" type="text/javascript"></script> <style type="text/css"> </style> </head> <body bgcolor="#636563" background="images/bg_darkgrey.gif"> ---------------------------------------- ↑がトップページです。 <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <STYLE> -------------------------------------- ↑がフレームの中です。 これらは基本的にはhtmlで作られているのですよね? javascriptという記述も出てくるのですが前述のようにテキストと画像の差し替えのみならスルーしても大丈夫でしょうか? FrontPageというのはこれらを作成時にしようしたソフトということでしょうか? Mac環境でビギナーに優しいソフトはあるのでしょうか? あるいはWinのみの環境でもよいものがあれば知りたいです。 とりあえず目的を満たすのに足る方法であればどういったものでもかまないのですが。 どうぞよろしくお願いいたします。

  • 背景と別の画像を右下に固定して表示するには?

    (1)背景を表示して、さらに(2)右下の位置に固定して別の画像を表示することは出来るのでしょうか? (1)だけなら、BODYタグの中で設定すれば出来ました。 (2)だけなら、某サイトでコピペしたものを使わせてもらい、表示することが出来ました。 しかし、二つを同時にしようとすると、2番目のものしか表示されません。 どうすべきなのか、無理なのか、ご存知の方、教えてください。 ちなみに、(2)のコピペとは以下のものです。スタイルシートというのでしょうか?良くわかりませんが。 <STYLE TYPE="text/css"> <!-- BODY{ background-image:url(gazou.png); background-attachment :fixed; background-repeat: no-repeat; background-position: 100% 100%; } --> </STYLE>

    • ベストアンサー
    • HTML
  • 背景画像のX方向繰り返し表示を止めたい

    掲題の通り、X方向のみ背景画像が繰り返し表示されてしまいます。 テキストスペースも中央部のみの640ピクセルに収まるようにしていますが、背景画像の記述方法が解りません。 制御部分のソースは下記の通りです。 宜しくお願いします。 <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <STYLE type="text/css"> <!-- body { background-image: url(img/bg.jpg) background-repeat:no-repeart; } --> </STYLE> </HEAD> <BODY text=#333333 background="img/bg.jpg"> <TABLE cellspacing="0" width="630" align="center" border="0"> <TBODY> <TR> <TD align=middle> <TABLE width="100%" border="0"> <TBODY> <TR> <TD align=center bgColor=#228b22><STRONG><FONT color=#ffffff>『ご挨拶』</FONT></STRONG></TD></TR>

    • ベストアンサー
    • HTML