- ベストアンサー
ホームページの背景設定
rieko000の回答
すごくざっくりしたソースですが、下記を参考に作ってみました。 ※ツイッターの背景をちょっと拝借してますが。 ○ポイント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>
関連する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
- 背景設定について。
ドリームウィバーでＨｐを作成してもらいました。全頁の背景に青色のグラデがかかっています。全頁の背景の色を変更したいのですが、仕方が分かりません。ビルダーでいじっているのですが、属性の表のトコを開いても、背景の指定はされていません。でも背景の設定がされているはずなんです！どこをどうしたら変更できるのでしょうか？ビルダーを右手に作成しているのですが全くできません。分かる方いましたらご教示ください。宜しくお願いします。
- 締切済み
- ホームページ作成ソフト