背景画像の下に隙間ができる【WordPress】
投稿日：
何が原因なのか？
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;
で試してみる
.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;
}
使い方によって意図しないことが起こったら、違う方法を試すといいかも
関連記事
-
-
自分のブログやサイトを持っている方にとって必須ともいえるアクセス解析ツールです。このツールを利用することによって、ブログやサイトの細かなアクセス状況によって分析することができるようになり …
-
-
規制対象外の小型ドローン 国内では現在200g未満のドローンは申請が入らないので、簡単に飛ばすことができます。 ただ、当たり前ですが危険な場所はやめた方がいいです。 大きさはスマホくらいで、ちょっとが …
-
-
以前、パソコンを購入するときは近くの電気屋さんに行っていましたが、のちにDELLのオンラインショップで購入するようになりました。 最近では、オリジナルのパソコンを取り扱っているオンライン …
-
-
Google Doc Embedder WordPressの記事内や固定ページ内で、PDFのファイルを利用したい、またはダウンロードできるようにしたい時に使うプラグインです …
-
-
1.セキュリティー Akismet Anti-Spam 自動的にすべてのコメントをチェックし、スパムのように見えるものをフィルターします。 2.バックアップと復元 Updr …
