- ベストアンサー
画像背景タグ記述
- みんなの回答 （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% (1305/1776)
あらかじめ大きな画像を用意する以外の方法では無理。そんな機能のタグもCSSも無い。 ただ一応、BadKnowHowというか裏技的な方法として、通常の画像を背景と誤認させる方法で、ウィンドウサイズに呼応して拡大縮小する様な効果を生み出す事は可能です。でも推奨はしません（一時的な呼び出しページなどで遊び程度に使う分には有り）。 ◆参考サイト:: ＞http://www.webbibo.com/blog/htmlcss/bg_dimension.html P.S. もしかして単純に画像の繰り返しを無くしたいというのであれば、 body { background:url('./bg.jpg') no-repeat; } ～でOKです。
お礼
ありがとうございます。やってみます。
関連するQ&A
- htmlタグで背景に画像を敷き詰めたい！
お世話になります。先日、htmlタグで背景に画像を敷き詰める方法について投稿させていただきアドバイスをいただきましたがいざ実行しましたところ、背景表示されず全くの空白の状態でした。 わたくしのやり方が間違っているのか？と思いますので再度投稿させていただきました。 ”背景に同じ画像を1つではなくたくさん敷き詰める方法”です。 どなたかアドバイスをお願いいたします。 ※ちなみに前回いただきましたアドバイスは <body background="back1.gif"> を<HEAD>から</head>の間に宣言してください。 back1.gifの部分にあなたが使いたい画像を指定すればｏｋです。 といただきましたが何も反映されません(-_-;) アドバイス・・お願いいたします。
- ベストアンサー
- HTML
- 画像を背景に
aimewでHPを作っていて困ってます。 PCから見ると真ん中に色の背景があってページなど があるんですけど、真ん中以外に壁紙をはりたいんです。 bodyのタグを使ったんですけど、表示されません。 で、編集のところをみるとbodyのタグが消えています。 画像を背景にする場合どうしたら表示されますか？
- ベストアンサー
- その他（インターネット・Webサービス）
- htmlタグで画像を背景に敷き詰める方法
お世話になります。 早速ですが、htmlタグを使用し小さな画像を背景に並べたい<敷き詰める>のですが、方法はどのようにすればよろしいのでしょうか？ アドバイスお願いいたします。
- ベストアンサー
- HTML
- 背景画像が半分しか表示されない
H.Pをdreamweaver mx 2004で作ったのですが、背景画像が半分しか表示されません。 自分のパソコン内でinternet explorer5.2に、あげると全て表示されています。 しかし、ホームページ先に転送してアップすると、背景の画像が半分しか表示されなくなります。 背景の絵が重いのかと思って、軽くしたりしてますが結果は変わりません。 背景の画像形式はgifです。 分かりにくい文章なうえ、情報も少なくて申し訳ないのですが、タグなどはイマイチ分からない為、貼付けようにもどこまでを貼付ければよいのかわかりませんでした。 原因が分かる方教えては頂けませんか？
- ベストアンサー
- HTML
- 背景の画像だけが・・・・
ＦＲＯＮＴＰＡＧＥ２０００を使ってＨＰを作成しています。 実は、タイトルにも書いたとおり背景の画像だけがプレビューで表示できないのです。 書式やファイルのところも確認し、タグも見てみましたが特に問題はないようでした。（背景の色も自動にしてあります） 不思議なのは、同じところに収納したあるいくつかの画像から挿入した画像は全部表示出来ているのに、背景だけが出てこないというのが非常に不思議です。 どのような原因があって、どういう解決法があるのでしょうか？
- ベストアンサー
- オフィス系ソフト
- 画像か背景か？どちらが表示が速い？
こんにちわ。 ホームページを作成する際に使用する画像サイズですが、皆さんは何バイトまでの圧縮を心がけてますか？ また、画像（imgタグ）として使用すると、背景（background）に使う時よりも表示が速く感じるのは気のせいでしょうか？ こんな初心者なみの質問ですが、もしよければみなさんの意見がききたいです。宜しくお願いします。
- ベストアンサー
- HTML
- 背景画像の大きさの調節
こんにちわ。 自分のホームページ（gaiax系）の背景にいい写真をみつけたのですが、 サイズが大きすぎて困っています。 画像加工ソフトなどは持っないので自分で加工しなおすことはできないんです。 タグでなんとかできますか？ スタイルシートと普通のBODYタグ両方教えていただければベストです。 スタイルシートだとネスケの人は表示できないということを耳にしましたので。 御回答よろしくお願いします。
- ベストアンサー
- HTML
お礼
ご丁寧なアドバイスありがとうございます。さっそくやってみます。