背景画像の下に隙間ができる【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でフォトギャラリーを作るのに3つのプラグインを入れてみた
プラグインを使って簡単にフォトギャラリー WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …