【html&css】ヘッダー画像が100％表示できません。

Question

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%;
	
}

t_fumiaki · Accepted Answer

%で指定する場合には工夫が要る。
信じられないかも知れないが、縦の比率は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%;　←追加←最重要！値は微調整する。

}

de_viant · Answer

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

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

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

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

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

ORUKA1951 · Answer

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

・・・　

　でしたら、 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; } と画像と切り離したほうが良いような・・

Dr.Fell · Answer

その罫線画像を表示させるだけなら、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;/*ここでコンテンツから問題の罫線までの空きを調整*/
}

【html&css】ヘッダー画像が100％表示できません。

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

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

そうではなくて・・。

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

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング