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

Question

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

naokita · Accepted Answer

ついさっき別の質問で似たようなケースがあったが、その参照サイトが jQueryで、 http://puzzel.jp/blog/sample/s15/ 文法とか気にしなければ、最単な方法で、

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

ORUKA1951 · Answer

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

naokita · Answer

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

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

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

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

ORUKA1951 · Answer

基本的には、できません。 HTMLの要素はインライン要素とブロック要素に分けられ、それぞれに置換要素と非置換要素があります。 imgは、非置換インライン要素なのでそのサイズは内容物の大きさによって決まります。ブロック要素はそれが含まれる親コンテナブロックの内寸を参照します　ということは、背景画像ではなくオブジェクトとしてHTML内におき、そのオブジェクトに対して display:block; width:100%; height:auto; とするしかありません。　ただし、HTML的には背景ではなく画像としてマークアップされるため好ましくはありません。例) 　　

本文

段落

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

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

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

No.1です。

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

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

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング