背景画像の自動調整

締切済

質問者：rasutaneko
質問日時：2009/05/16 10:51
回答数：1件

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

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

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： haluo
回答日時：2009/05/17 17:33

こんにちは。

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

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

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にあげて確認したわけではないので
完璧な方法ではないかもしれませんが
こういう方法もあると言う事で。頑張ってください。
ちなみに背景が暗い場合は、文字の色は明るくしてもらえるとユーザは助かりますよー。