- ベストアンサー
ホームページの背景設定
HPの背景の画像を制作したのですが、 図のようにA、Bと言うページを作った際にコンテンツの長さが異なった場合は 背景の長さも変更しなくてはいけないと思うのですが、どのようにして良いか解りません。 どのようにｈｔｍｌやCSSを設定すればよいでしょうか？
- miki722215
- お礼率10% (3/28)
- ホームページ作成ソフト
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
すごくざっくりしたソースですが、下記を参考に作ってみました。 ※ツイッターの背景をちょっと拝借してますが。 ○ポイント1 コンテンツ内容が少なくても、フッターの背景色を延ばしたい →bodyに背景色を入れる ○ポイント2 コンテンツ上部に背景を入れたい →1つ目のdivに上部の背景を「top」で入れる ○ポイント3 コンテンツの下部に背景を入れたい →1つ目のdivの中に、下部の背景を「bottom」で入れる ※注意事項 上下の背景が重なるくらいコンテンツ内容が少ないと、 上部の背景は、下部の背景にかぶってしまいます。 なので、かぶらない程度にコンテンツの高さ、最小値を 決めていれておくとよいと思います。 例） #Container-inner { background: url(http://twitter.com/images/themes/theme1/bg.png) left bottom repeat-x; _height: 500px; /*IE6対策*/ min-height: 500px; } 【ソースサンプル】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> body { background: #ddd; margin: 0; padding: 0; } h1 { margin: 0; padding: 0; } #Container { background: url(http://a3.twimg.com/a/1302214109/images/themes/theme4/bg.gif) left top repeat-x #0099B9; } #Container-inner { background: url(http://twitter.com/images/themes/theme1/bg.png) left bottom repeat-x; } #Footer { margin: 20px; height: 40px; } </style> </head> <body> <!-- ##### Container Start ##### --> <div id="Container"> <!-- ##### Container-inner Start ##### --> <div id="Container-inner"> <h1>サンプルHTML集</h1> <pre>Contents-inner ああああ </pre> </div> <!-- ##### /Container-inner End ##### --> </div> <!-- ##### /Container End ##### --> <!-- ##### Footer Start ##### --> <div id="Footer"> Footer </div> <!-- ##### /Footer End ##### --> </body> </html>
その他の回答 (3)
- DrFell
- ベストアンサー率55% (305/551)
css ------------------ body{margin:0;padding:0;background:yellow url(01.jpg) no-repeat top center;} div#contents{margin:50px auto 0;width:500px;background:url(02.jpg) no-repeat bottom center;} div#footer{margin:0;background-image:none;background:#999999; width:100%;border:none;text-align:center;} div div{margin:0 auto 50px;padding:2em;border:2px solid #999999;height:300px;} html ------------------ <body> <div id="contents"> <div>コンテンツ</div> </div> <div id="footer">フッター</div> </body> 背景の長さをページごとに変えていたら大変です。1枚の画像では伸び縮みしませんので、画像を2つにします。 が、cssでは1つのボックスに1つの背景画像しか置けません。この場合、bodyに上の背景と全体の色を、div contentsでコンテンツ全体を囲むことで2枚目の背景画像を表示し、その下にフッターを配置します。height:300px;は本来不要ですが、1つ目の画像と2つ目の画像の高さ以上の高さがdivにないと画像が表示されないので、入れました。
- naokita
- ベストアンサー率57% (1008/1745)
NO.1さんの言う通りですが、 真ん中部分が画像が無いので、 そこは伸ばしても問題無いようですね。（伸ばすと言うより色で表現） その条件下なら、 現在１枚の画像を２枚にスライスして上下に配置するって事。 その２枚の上下画像をBODYまたはDIVに上部の背景画像を設置し、 直下のDIVを追加し下部の背景画像を設置。 ※ px部分の数値は適当に微調整 ※ 当然、画像は透過の方が色の切れ目が一切無くなる。 ----------------- /* CSS */ #AAA{ background: yellow url(AAA.gif) no-repeat 50% 0; padding: 80px 0; } #BBB{ background: url(BBB.gif) no-repeat 50% 100%; } #AAA,#footer{ width:600px; margin:0 auto;} <!-- HTML --> <div id="AAA"> <div id="BBB"> <div style="margin:0 auto;width:400px;border:4px solid gray;"> <p>内容</p> </div> <div> <div> <div id="footer"><p>footer</p></div>
- torayoshi
- ベストアンサー率62% (910/1449)
普通背景を固定すればコンテンツが縦に長くなってもその分スクロールバーが出るので 背景を長くさせる必要ないし意味がありません。 この添付図を見ると背景の真ん中部分だけ間延びさせるように見ますが、 そんなこと何をどうやっても出来ません。
関連するQ&A
- TABLEの背景画像をCSSに変更したい。
今までTABLEを使って背景画像を指定していたのですが、CSSに変更したいと考えています。 現在はTABLEで図１のようにABC A'B'C' A''B''...と連続する背景画像を＜図３＞のカラム「ロ」に入れています。 これをCSSのbackgroud-imageで指定すると図２のB'ように途中で切れてしまいます。 これを背景イメージＡ，Ｂ，Ｃのいずれかの境界で背景を終わらせるようにコントロールすることはできないものでしょうか。 CSSだけで指定するのは困難なように思います。 JAVA Scriptとの併用になるのでしょうか。 CSSは基本的な使い方は理解しているつもりですが、JAVA Scriptは読める程度で書くことはできません。 わかりにくい説明で申し訳ありませんがどなたか教えていただければ助かります。 よろしくお願いします。 なお背景画像の高さはA＝B＝Cです。 背景画像は＜図３＞のカラム「ロ」、カラム「イ」「ロ」はコンテンツしだいで下に伸びます。 ＜図１：背景イメージ＞ ■■■ ┐ ■■■ A ■■■ ┘ □□□ ┐ □□□ B □□□ ┘ ◆◆◆ ┐ ◆◆◆ C ◆◆◆ ┘ ＜図２：backgroud-imageによる指定＞ ■■■ ┐ ■■■ A ■■■ ┘ □□□ ┐ □□□ B □□□ ┘ ◆◆◆ ┐ ◆◆◆ C ◆◆◆ ┘ ■■■ ┐ ■■■ A' ■■■ ┘ □□□ ┐ □□□ B' ┘ ＜図３：現在のカラム（TABLEで指定）＞ ┌─────────┐ │┌─┐┌─┐┌─┐│ ││ ││ ││ ││ ││イ││ロ││ハ││ ││ ││ ││ ││ │└─┘└─┘└─┘│ └─────────┘
- ベストアンサー
- CSS
- CSSで背景画像の固定
よろしくお願いいたします。 現在、WEBページを制作しておりまして CSSで背景画像を固定する方法で悩んでいます。 通常、背景画像を固定する際、 #contents { display:block; width:500px; height:500px; margin:0; background-image:url(img/hoge.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:bottom; } この様な感じで可能だと思うのですが、 今回やりたい事が出来ずに悩んでいます。 やりたい事が私の文章力では説明で伝わるか わかりませんので画像にしてみました。 図Aの様に「#contents」のブロック内の下段に固定に したいと思っているのですが、 実際上記の様なCSSの記述ですと図Bの様に ウィンドウの高さに対しての下段固定になってしまい ウィンドウを伸ばすと、「#foot」ブロックの後ろに 回ってしまい全体を表示してくれません。 どなたか、解決方法がおわかりになる方 ご教授願えますでしょうか。 また、過去同じ質問がありましたら、 お手数おかけいたしますがご誘導願えますでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 背景に画像を使ったページを作りたい。
タイトルの通り、DreamWeaverを使って背景に画像を使ったページを作りたく方法を考えています。ちなみにレイヤー、ＣＳＳは使いたくありません。 自分の少ない知識で考えると、ページプロパティで背景画像を選択して、その上にテーブルを使ってテキスト等を配置する…それしか思いつかないのですが、他に方法はあるのでしょうか？ あと、ページプロパティで背景画像を選択すると、ずっとリピートしてしまうと思うのですがリピートさせない方法はあるのでしょうか？ また、大きく重い画像をページプロパティで背景に設定した場合、やはりページの立ち上がりの時間は重くなるのでしょうか？ 経験が浅いため、ＨＰ制作中にいくつも疑問にぶち当たってしまいます。 どなたか、初心者（私が）と言うことを踏まえて、教えていただけないでしょうか。お願いいたします。
- ベストアンサー
- CSS
- CSSでの背景色設定とIE6.0での表示について
お世話になります。 全くの初心者ですが、Golive7.0の体験版を使ってHP作りに挑戦しています。 過去ログで調べてもわからなかったので教えて下さい。 使用OS : Windows XP (1) HTMLで表示する文章を作り、CSSファイルで、divブロック（class=contents）内の背景や文字色などは設定できましたが、ページ全体のbodyに適用させる背景色は反映されません。 body { background-color: #E7FAEE; } HTMLソースの方に直接上記の設定を指定すると反映されました。 参考にしている入門書にはCSS内で記述するように書かれていますが、何か忘れていることなどがありますでしょうか？ CSSファイルのリンク設定はちゃんと反映されています。 (2) divブロック（contents）を画面の真ん中に配置するよう、 .contents { text-align: center; width: 600px; margin:auto; } と設定しましたが、IE6.0では画面の左端に寄っています。 ネットスケープ7.1ではきちんと中央に表示されます。 入門書には、『HTMLソースに<div class="contents">を入れないとIE5.xでは幅が固定されません』とあり、そこも記述してあります。 サーバーに上げてもプレビューと同じく反映されていませんでした。 5.xバージョンではないのに反映されないのはなぜでしょうか？ 以上、どうぞよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- CSSでの背景画像の設定について
CSSでの背景画像の設定について質問です。 参照ページ（http://www.balmuda.com/jp/）のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。 以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper> メニューバー部分の背景画像を指定 <topmenu> margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents> margin0 auto;で画面中央に配置 <footer-wrapper> フッター部分の背景画像を指定 <footer> margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。＞ 解決策を教えて頂ければ幸いです。よろしくお願い致します。
- ベストアンサー
- HTML
- 画像の背景色とHTMLファイルの背景色
私がWebページを制作している環境は下記のようになっています。 OSはWindowsXP。 モニターは液晶モニター。 DreamWeaver3でWebページを制作。 FlashMX、FireworksMXを使って、ムービーコンテンツ、画像を作成。 Fireworksで制作した画像をPhotoshop7でJPG形式に変換。（最高画質・低圧縮率で変換） 【ここからが質問です】 DreamWeaverで設定したHTMLファイルの背景色＆Flashコンテンツの背景色と PhotoshopでJPGに変換した画像の背景色を 同じカラーコードにしても、 ウィンドウズのプロパティで画面の色を16ビットにすると Webブラウザ上で違った色に見えてしまいます。 （32ビットだと大丈夫） Fierworksで制作したPNG形式の画像をUPすると 色の違いが無くなるのですが JPG形式に変換した画像だとダメです。 このブラウザ上での色の見え方の違いを解決することは出来ないのでしょうか？ 仕方のないことなのでしょうか？ お分かりになる方、教えてくださると助かります。 よろしくお願いします。
- 締切済み
- グラフィックソフト
- bloggerブログの背景画像設定について
こんにちは！ CSS、HTMLに詳しいみなさんのお力を借りたく、質問させていただきます。 ブログをやっていまして、最近はてなからBloggerに移行しました。 HP制作などを昔からすこしやっていてある程度なら理解しているつもりだったのですが Bloggerの独自のタグを使用しなくてはいけないせいか？背景に画像をつかいたいのですが いまいちどこを編集すればいいのかわからなくて困っています。 小さい画像を敷き詰めて背景(本文とタイトルの透過はせずに)にしたいです。 基礎的な質問でしたら申し訳ないのですが、回答よろしくお願いします！ (このサイトの紹介がわかりやすいよ、などもあったらうれしいです。)
- 締切済み
- ブログ
- 【ホームページ背景の設定の仕方を教えて下さい!!】
初めまして。お世話になります。 CSS初心者なんですが、 http://nikukyu-punch.com/temp_biz.html 上記のサイトの「議員向けホームページテンプレート [giin1_pink]」を 使用したいと思ってるのですが、ページの高さが高くなった時に、 途中で背景が切れてしまいます。 高さが高くなってもフッターまで背景画像が反映される為には どのような設定を行えば宜しいでしょうか？ 私の持っている技術では難しかったので 皆さんのお力をお借りしたいです。 宜しくお願いいたします。 画像自体の高さを変えましたが、ファイヤーワークスの最大の高さが6000pxで それ以上のページの高さがあります。
- ベストアンサー
- CSS
- ホームページの背景画像について
ホームページを作ろうと思い、HTML語を勉強していたのですが・・・どうしても素材で持ち帰らせていただいた背景画像が表示されないんです。 <HTML> <HEAD> <TITLE>XXXXXXXX</TITLE> </HEAD> <BODY> <CENTER> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <A HREF="top.htm" target="contents">Home</A> <BR><BR> <A HREF="about.htm" target="contents">about</A><BR><BR> <A HREF="main.htm" target="contents">main</A><BR><BR> <A HREF="link.htm" target="contents">link</A><BR><BR> <A HREF="http://blog.livedoor.jp/san8rain8clow/" target="contents">diary</A><BR><BR> </CENTER> </BODY> </HTML> こんな感じでタグを作っていたのですが、あと背景画像だけ表示したいんです・・・。 このタグが間違っているのでしょうか？ 教えてください！
- ベストアンサー
- HTML
- 背景設定について。
ドリームウィバーでＨｐを作成してもらいました。全頁の背景に青色のグラデがかかっています。全頁の背景の色を変更したいのですが、仕方が分かりません。ビルダーでいじっているのですが、属性の表のトコを開いても、背景の指定はされていません。でも背景の設定がされているはずなんです！どこをどうしたら変更できるのでしょうか？ビルダーを右手に作成しているのですが全くできません。分かる方いましたらご教示ください。宜しくお願いします。
- 締切済み
- ホームページ作成ソフト
