人に聞けない痔の悩み、これでスッキリ >>

html&cssを勉強中の初心者です。

ヘッダー画像を横幅いっぱいに設定するために、画像を1000×100pxで作成しました。
下部分に罫線が2本入ったデザインです。

cssを以下のように入力しましたが、heightを150pxにしないと、罫線が表示しません。
色々調べましたが何が原因なのか分からず手こずっています(><;)
ホームページビルダーを使用していますが、なるべくcssで作成しています。

基本的な質問ですが、ヘッダーの縦幅を100pxにしたい場合はそれより大きいサイズの画像を
設定しなければいけないのでしょうか?

よろしくお願い致します。

header{
width:100%;
min-width:1020px;
height:150px;
background-image:url('img/header.png');
background-repeat:no-repeat;
background-position:center;
background-size:100%;

}

「【html&css】ヘッダー画像が100」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (4件)

%で指定する場合には工夫が要る。


信じられないかも知れないが、縦の比率はpadding-bottomで調整する。

#header{
width:100%;
min-width:1020px;
/*height:150px;*/ ←要らないからコメントアウトするか、削除
background-image:url(headertest.gif);
background-repeat:no-repeat;
background-position:center;
background-size:cover; ←cover指定する。
padding-bottom:10%; ←追加←最重要!値は微調整する。

}
    • good
    • 0
この回答へのお礼

皆様、詳しい回答をありがとうございました。
教えて頂いたことを色々試した結果、ようやく思い通りのヘッダーが出来ました!!
本当に助かりました、ありがとうございます。

お礼日時:2017/01/11 14:38

その罫線画像を表示させるだけなら、1000×100px?高さが100pxもいるのかな?


甚だ疑問。1000×10px程度の画像にすることをお勧めします。
問題の画像を、下に表示することをお勧めします。そうすれば、150pxも取らないと画像が表示されないなんてことはなくなる気が
header{
width:100%;
min-width:1020px;
/*height:150px;これいらないような気が*/
background-image:url('img/header.png');/*上がグラデーションになることにこだわりがあるんですよね?*/
background-repeat:no-repeat;
background-position:center bottom;/*ボトムを追加。これ重要*/
background-size:100%;
padding-bottom:30px;/*ここでコンテンツから問題の罫線までの空きを調整*/
}
    • good
    • 0

そうではなくて・・。

というのはウィンドウサイズは人により様々なのですから、自分のパソコンだけを考えたらだめ。

<body>
 <header>
 </header>
 <section>
・・・
 </section>
 <footer>
・・
 </footer>
でしたら、
html,body{margin:0;padding:0;}
body>header{
width:100%;
background:url('img/header.png');
background-size:cover;
}
★header内にある他の要素のマージンが関わることもある。
また、罫線が入るのでしたら、いっそのこと
body>header{
border:double 6px blue;
border-width:0 0 6px 0;
}
と画像と切り離したほうが良いような・・
    • good
    • 0

background-size:100%;が効いているからだと思いますよ。



width:100%;があるので、画像サイズより大きい画面だと
当然画像が引き伸ばされるので画像が切れてしまうのだと思います。

わたしの環境で試してみたのですが、
画像の上が切れる感じです。

なので、他が影響しているのかもしれませんが……。
なんともいえません。

ブラウザのデベロッパーツールで数字などを変えながら試してみると
よくわかると思います。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング