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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
インラインフレームのページ内...
-
スペースを使わず文字位置を揃...
-
複数のボタンを等間隔に、かつ...
-
HTML5 iframe の代わり
-
横並びdivで一部の初期高さがず...
-
<!-- #BeginLibraryItemとは
-
div要素が重なってします
-
HEADタグとheaderタグ
-
divとpの使いわけ
-
標題<h1>に、網掛けはできますか?
-
htmlの見出しタグ(<h1>)の次...
-
画面を縮小するとカラムが落ち...
-
フッターがウインドウの一番下...
-
CSSで、contentsがfooterに重な...
-
特定範囲内のCSSの継承を断ち切...
-
セクションをdivで囲むと見出し...
-
背景画像に全体または部分的に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報