ホームページの背景画像についての質問です。
自分なりに調べてはみたのですが、
よい答が見つからなかったため質問させていただきます。

http://jamaikaumarenorasutaneko.web.fc2.com/

上記のようなホムペを作っているのですが、
トップ画面の背景がブラウザによっては画像のサイズが足りず右側に白い空白ができてしまいます。
また、逆に画像が大きく全てを表示しきれないケースもあると思います。
お気に入りを常に表示させている場合はもちろん後者のケースにあたると思います。

もちろんブラウザによって表示が異なってしまうのは承知しているのですが、
それをタグやれスタイルシートやれで自動調整はできないものでしょうか?
希望としては、
画面サイズの異なるPCで表示させたとき、
指定した画像の全てがどのPCでも表示させられる。
例えば「Microsoft Office Picture Manager」で画像の編集(サイズの変更)をしたときの、拡大&縮小を画面サイズに合わせて自動で行ってくれる、
そんなタグを探しています。
欲を言えば「お気に入り」を表示していてもそれすら自動調整されるといいです。

かなり分かりにくい説明になってしまってすみません。
ご教授よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

こんにちは。



背景として横幅いっぱいの表示は残念ながらありません。
画像を横幅いっぱいに表示させ、それを背景として利用する方法でしたらあります。

どのように指定されているかの記載がなかったため、
勝手ながらでちょっとソースを拝見させて頂きました。

top.html内
まず、既にある<body>内の諸々の指定は消してください。
で、シンプルになった<body>直後に、背景として指定したい画像を

<img src="img/268.jpg" width="100%" style="position:absolute; top:0px; left:0px; z-index:1;">

として指定します。
これで、268.jpgを横幅をブラウザの100%の大きさに広げて、且つ左と上の隙間なく、さらに一番下に敷いときます、という指定がなされます。

それ以降に、表示させたい文字や画像のエリアを
<div>で囲み、そのdivにはz-index:2;か何か、1以上の整数で指定してあげてください。
※z-indexは重なりを調整するCSSです。

例えば
<div style="position:absolute; top:10px; left:10px; z-index:2">
<p>タイトル<br>
hogehogehogehoge</p>
</div>

という感じですかね。
ここのdivで、一番下に敷いたものの上と左から10pxの隙間を空けて表示します。で、重なりは2番目です、という指定がなされます。
topとleftの位置調整はご自身で設定されてください。

全てのブラウザおよびwebにあげて確認したわけではないので
完璧な方法ではないかもしれませんが
こういう方法もあると言う事で。頑張ってください。
ちなみに背景が暗い場合は、文字の色は明るくしてもらえるとユーザは助かりますよー。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。
大変勉強になりました。

今回は画像サイズの影響等もあり、
思ったようにいかない点もでてしまったため、
反映はさせませんでしたが、
いずれ自分がレベルアップしたときに使わせていただきます。

お礼日時:2009/05/25 21:03

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング

おすすめ情報