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

  WordPressでスポーツチームやサークルまたは、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思いますが、独学で学んだ私が作っ …

真っ白

WordPressで画面が真っ白になってしまった時の対処方法

    突然画面が真っ白になって、何度試してもページが表示されなくて気分がブルーになってしまった時に試した方法   今回は、テーマの中にあるfunction.phpを編集 …

wifi

WiFiどれがいい?

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

ヘッダー画像変える

ヘッダー画像やスライダーをページ毎に変える方法

  WordPressで作成したページで、ヘッダー画像やスライドショーをページごとに変えたい! 今回やってみたことは、条件分岐でヘッダーの画像部分を振り分けるといった方法です。 プラグインな …

vegasスマホとPC

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

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