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 テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた②

  4.まずは、function.phpに追加 テーマによっては、変更しなくてもきれいに表示されることもあります。 ※function.phpに追加する前に、念のためfunction.php …

オンマウス以外

オンマウス(マウスオーバー)以外を透かす

オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。 でも今回は オンマウス以外に変化をつけていきたいと思います。 個人的には、少なめのメニューやカテゴリーリストされ …

フォトギャラリー

WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた

  プラグインを使って簡単にフォトギャラリー   WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …

webサイト

Webサイトとは?

これまた、Webとは?に出てきた『Webサイト』という言葉ですが、 『ホームページ』や『Webページ』と似たような気がしますが、 正確には、各企業や各団体などが作っている案内や情報などで表示される1ペ …

wifi

WiFiどれがいい?

  Wi-Fi特集   結局どれにすれば良いのか悩んでしまうのでおすすめをご紹介!   海外WiFi   イモトのWiFi Wi-Ho!(ワイホー) 世界各国( …