背景画像の下に隙間ができる【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;
}
使い方によって意図しないことが起こったら、違う方法を試すといいかも
関連記事
-
-
トップページに投稿記事をランダムに表示 通常トップページに表示するのは、 ・固定ページ ・投稿記事 のどちらかが多いと思いますが、 今回は投稿記事の新着順ではなく、ランダム …
-
-
あまりWordPressをテクっていない私が、今回はプラグインなしでカスタム投稿タイプを作ってみました。 たぶん、詳しい人からするとかなり簡単にできてしまうんだと思いますが、 詳しい人ほ …
-
-
WordPressで画像をかっこよく見せる ワードプレスを使っていて画像を扱うことも多いと思いますが、サイトをかっこよくおしゃれに見せる方法の一つとして、画像に手を加えてインパクトを与え …
-
-
WordPressでフォトギャラリーを作るのに３つのプラグインを入れてみた
プラグインを使って簡単にフォトギャラリー WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …
-
-
レスポンシブに対応したサイトを作って、 ＰＣ・ノート・タブレット・スマホなどの確認をしたい時におススメなのが、 『Responsively』 【Download now】か …
