背景画像の下に隙間ができる【WordPress】

• HOME
• PAGE1
• PAGE2
• PAGE3

 

 

何が原因なのか？

 

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;
で試してみる

• HOME
• PAGE1
• PAGE2
• PAGE3

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

使い方によって意図しないことが起こったら、違う方法を試すといいかも