- ベストアンサー
画像背景タグ記述
一つの画像を複数並べるのではなくホームページの大きさに一枚背景表示するタグ教えて下さい。
- umimonogat
- お礼率59% (2164/3629)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.2です。 簡単ですが・・・時間が無くて、書いてませんでしたが、一枚の画像を背景としてウィンドウサイズいっぱいに広げる方法の具体的方法です。 HTMLが <body> <div class="article"> <p class="background"><img src="./images/background/bg.png" width="180" height="135" alt=""><!-- 実サイズ800px600px --></p> <div class="header"> <h1>見出し</h1> </div> <div class="section"> </div> <div class="footer"> </div> </div> </body> だとしたら html,body{margin:0;padding:0;width:100%;height:100%;} body{ background:url(./images/background/sky.jpg); background-size:100% auto; } div.article{width:100%;height:100%;margin:0;position:absolute;} /* 古いブラウザ用 */ p.background img{ display:block; position:absolute;top:0;left:0; width:100%; height:auto; z-index:-1; } これで、横幅いっぱい、縦はそれに合わせて伸縮しますから、画像は変形しません。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞一つの画像を複数並べるのではなくホームページの大きさに一枚背景表示する ひとつの画像を、ウィンドウ巾いっぱいに CSS3では、 background-size:cover; /* 縦横比を変更してカバーする */ background-size:100% auto;/* 横幅をいっぱいに広げて縦は元の比率 */ background-size:auto 100%;/* 縦をいっぱいに広げて横は元の比率 */ などが使えます。 CSS2では、背景の画像サイズを変更する方法がありませんから、IE8以前のように古いブラウザでは、画像をdisplay:block;として、親コンテナブロックの巾に合わせることになります。 ★タグは、文書構造を示すもので、デザインのためではありません。 ←構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 『この様にデザインするタグ』という考え方は、HTML4.01の勧告(1999年12月)以来、とても強く否定されてきました。そして予告どおりまもなく勧告を控えているHTML5では、HTMLは文書構造をマークアップするものにより厳格になり、そのために新たな要素(タグ)も追加されます。 本題とは関係ありませんが、とても大事なことなので。
お礼
ありがとうございます。やってみます。
- 4017B
- ベストアンサー率73% (1336/1814)
あらかじめ大きな画像を用意する以外の方法では無理。そんな機能のタグもCSSも無い。 ただ一応、BadKnowHowというか裏技的な方法として、通常の画像を背景と誤認させる方法で、ウィンドウサイズに呼応して拡大縮小する様な効果を生み出す事は可能です。でも推奨はしません（一時的な呼び出しページなどで遊び程度に使う分には有り）。 ◆参考サイト:: ＞http://www.webbibo.com/blog/htmlcss/bg_dimension.html P.S. もしかして単純に画像の繰り返しを無くしたいというのであれば、 body { background:url('./bg.jpg') no-repeat; } ～でOKです。
お礼
ありがとうございます。やってみます。
お礼
ご丁寧なアドバイスありがとうございます。さっそくやってみます。