背景画像の下に隙間ができる【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 テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた②
4.まずは、function.phpに追加 テーマによっては、変更しなくてもきれいに表示されることもあります。 ※function.phpに追加する前に、念のためfunction.php …
-
-
オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。 でも今回は オンマウス以外に変化をつけていきたいと思います。 個人的には、少なめのメニューやカテゴリーリストされ …
-
-
WordPressでフォトギャラリーを作るのに３つのプラグインを入れてみた
プラグインを使って簡単にフォトギャラリー WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …
-
-
これまた、Webとは？に出てきた『Webサイト』という言葉ですが、 『ホームページ』や『Webページ』と似たような気がしますが、 正確には、各企業や各団体などが作っている案内や情報などで表示される1ペ …
-
-
Wi-Fi特集 結局どれにすれば良いのか悩んでしまうのでおすすめをご紹介！ 海外WiFi イモトのWiFi Wi-Ho！（ワイホー） 世界各国（ …
