Web全般 wordpress

背景画像の下に隙間ができる【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;
  }

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

-Web全般, wordpress
-, , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

画像を順番に表示

画像を順番に重ねて表示

  画像を順番に重ねて表示したい。 画像を遅らせて表示したい。 画像に動きをつけたい。   今回は、WordPressでトップページ(フロントページ)のみ、動きのある画像を表示した …

vegas動画と画像

画像と動画を混合させて表示VEGAS

動画も一緒に表示させる方法   動かしてみた方法は以下の通りです。   1.先に動画を表示して、次に画像を表示する方法   jQuery(document).ready( …

vegasスマホとPC

スマホとPCの条件分岐でVEGASを切り替える方法

  スマホとPCの条件分岐でVEGASを切り替える方法   表示したいところに以下を記述します。 <div class="img-movie"> & …

リンク先を取得

簡単にリンク先のホームページを取得

  Browser Shots   WordPressのプラグインを利用して、簡単にリンク先のホームページの情報・画像を取得してサムネイルのように表示ができます。   & …

マイマップを重ねる

Google Mapのマイマップを重ねる

  グーグルマップでいろんなルートを作成しました。 例えば、1コース(ルートAAA)・2コース(ルートBBB)・3コース(ルートCCC)といったように複数のパターンを作り、それぞれ地図にマー …