背景画像の下に隙間ができる【WordPress】
投稿日：
何が原因なのか？
HTMLでは、下記の様にしています。
<div class="haikei" title="背景画像の下に隙間"></div> <ul class="demo-menu"> <li>HOME</li> <li>PAGE1</li> <li>PAGE2</li> <li>PAGE3</li> </ul>
cssでは、下記の様にしています。
.haikei{
background:url('https://show-be.net/wp-content/uploads/2017/11/wordpress1125b.gif') no-repeat;
background-size:contain;
height:300px;
}
.post ul.demo-menu{
list-style:none;
display:table;
width:100%;
padding:10px 0;
background:#ddd;
}
.post ul.demo-menu li{
display:table-cell;
width:25%;
text-align:center;
}
background-size:contain;
原因は、背景画像のcssで、background-size:contain; にしていたから
【contain】は、
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
違う方法でやってみる
HTMLは同じで、cssの【background-size】を変更する
background-size:cover;
または、
background-size:auto;
で試してみる
.haikei-2{
background:url('https://show-be.net/wp-content/uploads/2017/11/wordpress1125b.gif') no-repeat;
background-size:auto;
height:300px;
}
隙間はなくなったが、ちょっと右によっているような気がする
その時は、
background-position:center; を追加してみる
.haikei-2{
background:url('https://show-be.net/wp-content/uploads/2017/11/wordpress1125b.gif') no-repeat;
background-size:auto;
background-position:center;
height:300px;
}
使い方によって意図しないことが起こったら、違う方法を試すといいかも
関連記事
-
-
WordPressのプレビューで変更されていない時にチェックすること
WordPressで固定ページや投稿ページまたは、カスタム投稿タイプでテキストの色を変更したり、大きさを変更するなどしてプレビュー画面で確認したが、変わってない！ってことはないですか？ また、cssや …
-
-
これまた、Webとは？に出てきた『Webサイト』という言葉ですが、 『ホームページ』や『Webページ』と似たような気がしますが、 正確には、各企業や各団体などが作っている案内や情報などで表示される1ペ …
-
-
画像クリックで 違う画像やテキストの入ったBOXを表示させる
プラグインなしで、別の画像やテキストをlightboxのように表示させる html <a class="item-demo"> …
-
-
<link>で読み込んだのにEdgeで正しく表示されない <link href=”https://fonts.googleapis.com/css2?fa …
-
-
SEOとは、Search Engine Optimizationの略で、検索エンジン最適化のことです。 検索することによって表示される順位をより高い順位にすることを目的としています。 まず始めに、Go …
