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

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

関連記事

ワードプレス

All in One SEO Packで XMLサイトマップをGoogleに 送信する方法

  ワードプレスのプラグインで超有名な『All in One SEO Pack』ですが、必ず入れたいプラグインの1つです。 その名前の通り、SEO関係の機能が一つにまとまっているので、かなり …

リストメニューを順番に表示

メニューリストを横から順番に表示させる jsとcss

  前回の記事では、『メニューリストを横から順番に表示させる cssのみ』ということで、 cssだけで動きのあるメニューを作成しました。   今回は、jsファイルに書き込んで同じよ …

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた④

  11.メンバー一覧表示のカスタマイズ   メンバー個人個人の登録が終わったら、今度は一覧表示を作ってみます。 あまりごちゃごちゃ触りたくないので、以下のファイルだけ中身を少し変 …

スマートスライダー

Smart Sliderのプラグインで画像に網掛け

  スライダー画像に網掛けをする   簡単にフェードアウトやスライダーができるWordPressのプラグインで有名な【Smart Slider】を使って、画像に網掛けをしたいと思い …

お問い合わせ

WordPressにお問い合わせフォームを入れるならこの2つのどちらか

  お問い合わせフォームのプラグイン WordPressでWebサイトを作成していて、お問い合わせフォームを設置することがあると思いますが、そんな時はプラグインを使うと簡単に設置・導入が可能 …