html {
background-image: url(../images/design_02.jpg);
background-repeat: repeat-x;
background-position: top;
}
body {
font-family: sans-serif;
color: #333333;
background-color: #ffffff;
background-image: url(../images/design_47.jpg);
background-repeat: repeat-x;
background-position: bottom;
}
でcssを組んでいます。
画面一杯に、ヘッダーを含めた上部、フッターを含めた下部にグラデ背景を乗せたデザインにしたいのですが、上記cssでは緩衝しあうのか、bodyで置いた画像しか表示されません。
このようなデザインにしたい場合、どのようなcssにすれば良いのでしょうか。
No.1
- 回答日時:
HTMLさえきちんと出来ていれば問題ないはず・・
<body>
<div class"header">
<h1>タイトル</h1>
<div class="section">
<h2>見出し</h2>
<p>・・・・</p>
</div>
<div class="footer">
</div>
</body>
[CSS}
html,body{margin:0;font-family: sans-serif;color: #333333;}
div.header,div.footer{
background-repeat:repeat-x;
}
div.header{
background-image: url(../images/design_02.jpg);
background-position:right top;
}
div.footer{
background-image: url(../images/design_47.jpg);
background-position:right bottom;
}
この回答への補足
上の書き方だと、headerとfooterの背景のみに画像が表示されるはずですよね?
私がやりたいのは、headerとfooterのみではなく、画面上一杯に、上と下に画像がx-repeatされる形です。中央にwrapperで囲んだheader,main,side,footerがきますが、デザイン的にはそwrapperの左右のスペースの上下に、画像がx-repeatされる形です。
No.2ベストアンサー
- 回答日時:
<html>の背景が見えないのは<body>の背景色で隠れてるからですよ。
<html>にbackground-colorを指定し、
<body>のbackground-colorを消すかtransparentを指定してみてください。
No.3
- 回答日時:
「、画面上一杯に、上と下に画像がx-repeatされる形です。
」図もないので、本当に何をされたいかわからないのです。「画面上」と「上と下」は矛盾してるし・・
ウィンドウの縦横とも、ウィンドウの高さ、幅に対して100%と言う意味でしたら無理です。(古いIEはバグがあってheightでウィンドウ高さを基準にしますが、ブロック要素は内容の大きさによって高さが変わるべきですから誤り)
ウィンドウの高さ・幅は、訪問者のディスプレイの大きさ、ウィンドウのサイズ、解像度、文字の大きさで変化します。基本ですが、HTMLの目的が
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
である限り、不可能ですし、著者がそれを求めるのは??です。
ただ、それではあまりにもなので、比較的多いウィンドウの高さが600~780pxくらいと仮定した方法ですが、その範囲内でグラデーションの縦長の画像(それより下は単一色)を用意して、repeat-xで敷き詰めるのが良いでしょう。header,section,footerのmin-heightをきちんと指定しておけば、高さが600px以上の場合はあなたの思い通りに、それ以外のサイズ(i-phone450px,幅広ディスプレイの1600pxとかでも閲覧に支障はないでしょう。
添付図の中央は1280px×760px、左上は500px幅、右下は1780px・・・
[HTML]
<body>
_<div class"header">
__<h1>タイトル</h1>
_<div class="section">
__<h2>見出し</h2>
__<p>・・・・</p>
__<div class="nav">
___<ol>
____<li><a href=""></a></li>
____<li><a href=""></a></li>
____<li><a href=""></a></li>
___</ol>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
_</div>
</body>
</html>
[CSS]
html,body{
_margin:0;
_font-family: sans-serif;
_color: #333333;
_background: rgb(125,125,125) url(./images/background/01.jpg) repeat-x 0 0;
}
div.header,div.footer,div.section{
_width:80%;min-width:450px;max-width:900px;
_margin:0 auto;
_background:white;
_border:red 1px solid;
}
div.header{min-height:200px;}
div.section{min-height:400px;position:relative;}
div.section div{border:green solid 1px;}
div.section div.nav{
_position:absolute;
_width:20%;min-width:100px;height:100%;
_top:0;left:0;
}
div.section h2,div.section p{
_margin-left:20%;
}
No.4
- 回答日時:
私も#2さんと同じ意見です。
質問分にあるままで、background-color:をとり、白がいいなら、htmlに移してはいかがでしょうか。ついでに、bodyのmarginを0にされることをお勧めします。もう1つ、文書宣言が書かれていないのですが、過去互換では、htmlには背景を指定できません。宣言が、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
や
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
など、標準に準拠したモードになっているか、ご確認ください。
過去互換で、2つの背景にしたいなら、今現在上部か下部にあるボックスを上手く利用し横幅を100%とした、背景をつけられることをお勧めします。横幅100%とは、margin:0;border:0の状態で、html直下にあるものです。それもなく、わざわざつけなくてはならないなら、#1さんのような、box(divなど)をつけることになると思います。divもbody直下におけば、画面いっぱいの表現が可能です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
携帯サイト、ナノでのタグ編集...
-
htmlのolやulなどlistにtitleや...
-
オシャレな区切り線はありませ...
-
テーブルの隙間について
-
min-heightとheightの違いについて
-
<div id="container">の使いか...
-
HTMLパーツとは何ですか?
-
1時間30分を簡単に表したいで...
-
CSSで、contentsがfooterに重な...
-
スペースを使わず文字位置を揃...
-
グリッドレイアウトで"auto-fit...
-
【CSS】HTML直書き→外部ファイ...
-
HTML属性での「""」 「''」違い
-
<div>で改行させない方法
-
開始タグと終了タグについて
-
IEで表示されてしまう余白をな...
-
【ヒトの神秘】美男美女から何...
-
ウインドウを小さくするとbody...
-
Macで画像の切り抜きできないの?
-
ワードにコピペ、画像が表示さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報