背景画像をブラウザサイズに合わせる方法。

解決済

質問者：chami_3
質問日時：2011/06/25 17:09
回答数：4件

初心者です。
HPの背景画像を、閲覧者のブラウザサイズに合わせて拡大縮小させる方法を教えてください。
いろいろ調べてやってみたのですがうまくいきません…。
よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： naokita
回答日時：2011/06/26 02:07

ついさっき別の質問で似たようなケースがあったが、

その参照サイトが jQueryで、
http://puzzel.jp/blog/sample/s15/

文法とか気にしなければ、最単な方法で、

<body style="margin:0; padding:0;">
<img src="***" width="100%" alt="*" style="position:absolute; top:0; z-index:-1;">

最小幅 min-width: ; も必要かな。高さをどうするのか・・・

- 1
- 件

通報する

この回答へのお礼

ありがとうございました！
とりあえず目的は達成できました。
まだまだ勉強が必要ですが…
本当に助かりました！
ありがとうございます。

通報する

お礼日時：2011/06/26 14:21

No.4

回答者： ORUKA1951
回答日時：2011/06/27 08:25

No.1です。

私は、最初のウェブページを作成して１４年になりますが、最も、際立ってアクセスが多いのは、HTML2で、参考書を見ながら率直に書かれたページなのです。3.2の時代に一時期TABLEで凝ったデザインのページを作成していましたがまったく訪問者もなく、HTML4.01が登場して５年たってから、率直なHTMLに戻しました。
　文書構造に逆らってまで見栄えをこだわっても逆効果なことを何度も何度も経験しています。ユーザーはデザインを見るために訪問してくるんじゃない、内容こそ目的だと思っています。ですから、正しく文書の内容に沿ってマークアップされているかと、Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )などでのチェックは欠かしません。
　背景はあくまで文書に関係ない背景ですから画像としてマークアップするのは薦めません。それだけは忘れないでくださいね。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
私もそう思うのですが…クライアントからの要望でやむなく手を出している次第です。
ご意見、肝に銘じておきます。
ありがとうございました！

通報する

お礼日時：2011/06/27 15:39

No.3

回答者： naokita
回答日時：2011/06/27 00:28

NO.2回答者 naokitaです（お礼拝見済み）

＞まだまだ勉強が必要ですが…
その手の方法は、ほぼ使わないから勉強する意味が薄いでしょう・・・
正直、不具合もあるからあまり勧めないです。
（自分はまず使わないですね）
背景画像も特大画像なんて使わない方が良い。
-----------
ついでに、
もう数年したらCSS3がメインになるから、
今の内に基礎知識程度（混乱しない程度に）は学んだ方が良いかも。
background関係のCSS3だけでも、かなり便利で簡単にクオリティが高くなりますよ。

拡大縮小は、　background-size: ;　だけでOKになるので。

伸縮背景画像は、
今は、jQueryにしろCSS,CSS3にしろデメリットもあるので、
他のCSSのように安易に使わない方が良いって事です。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
やはり基本から外れてしまうことは多用すべきではないんですね。
jQueryを勉強してみようと思っているのですが、それも無駄になるかもしれませんね…。
CSS3のほうを優先してやってみようと思います。
丁寧なアドバイス、ありがとうございました！

通報する

お礼日時：2011/06/27 15:34

No.1

回答者： ORUKA1951
回答日時：2011/06/25 19:37

基本的には、できません。

HTMLの要素は
インライン要素とブロック要素に分けられ、それぞれに置換要素と非置換要素があります。
imgは、非置換インライン要素なのでそのサイズは内容物の大きさによって決まります。ブロック要素はそれが含まれる親コンテナブロックの内寸を参照します

　ということは、背景画像ではなくオブジェクトとしてHTML内におき、そのオブジェクトに対して
display:block;
width:100%;
height:auto;
とするしかありません。

　ただし、HTML的には背景ではなく画像としてマークアップされるため好ましくはありません。

例)
<body>
　<div class="header">
　　<h1><img src="./images/topLogo.jpg" width="480" height="100" alt="ようこそ私のサイトへ"></h1>
　</div>
　<div class="section body">
　　<h1>本文</h1>
　　<p>段落</p>
　</div>
</body>

だとすると
div.header{width:80%;max-width:760px;margin:0,auto;border:solid 1px white;}
div.header h1 img{display:block;width:100%;height:auto;}