[css]背景に画像を入れた際に位置調整を行うにはどうすればいいのか

cssを使って画像を背景に設定することってありますよね。今回は設定した背景画像の位置調整をする方法をご紹介したいと思います。背景画像を左側に寄せたい、背景画像を中央寄せにしたい、背景画像を右寄せにしたいなど様々な要望があるかと思います。そんな要望に応えるために、ぜひ覚えていってください。

cssで背景画像の位置調整をしてみよう

cssで背景画像の位置調整を行うためには、background-positionを使用します。左寄せ、中央寄せ、右寄せなど非常に簡単に設定することができます。

またこのような大雑把な調整だけではなく、細かい調整も可能です。

サンプルコードと実装例は次のようになります。

<style>
.sample_bgposition_original{
   width:100%;
margin-top:30px;
 margin-bottom:30px;
 } 
 .sample_bgposition{
   width:100%;
   height:500px;
   background:url('画像のURL');
 margin-top:30px;
 margin-bottom:30px;
 }
 .bgleft{
   background-position:left;
 }
 .bgcenter{
   background-position:center;
 } 
 .bgright{
   background-position:right;
 }
 .bgx10y10{
   background-position:10% 10%;
 }
 .bgx90y90{
   background-position:90% 90%;
 }
</style>
<h3>オリジナル画像</h3>
<div class="sample_bgposition_original"><img style="width:100%;" src="画像のURL"></div>
<p>下記のサンプルでは、位置が変わっていることがブラウザのサイズに依存しないように、background-size:coverを使用おりません。background-size:coverを使用した場合はブラウザを小さくしますと、background-positionを指定した方向に画像が見えなくなっていきます。また、使用している画像が非常に大きいため、見える部分がその位置方向のみになります。</p>
<h3>background-size:leftを使用した場合のサンプル</h3>
<div class="sample_bgposition bgleft"></div>
<h3>background-size:rightを使用した場合のサンプル</h3>
<div class="sample_bgposition bgright"></div>
<h3>background-size:centerを使用した場合のサンプル</h3>
<div class="sample_bgposition bgcenter"></div>
<h3>background-size:10% 10%を使用した場合のサンプル</h3>
<div class="sample_bgposition bgx10y10"></div>
<h3>background-size:90% 90%を使用した場合のサンプル</h3>
<div class="sample_bgposition bgx90y90"></div>

サンプルコード一覧

オリジナル画像

下記のサンプルでは、位置が変わっていることがブラウザのサイズに依存しないように、background-size:coverを使用おりません。background-size:coverを使用した場合はブラウザを小さくしますと、background-positionを指定した方向に画像が見えなくなっていきます。また、使用している画像が非常に大きいため、見える部分がその位置方向のみになります。

background-size:leftを使用した場合のサンプル

background-size:rightを使用した場合のサンプル

background-size:centerを使用した場合のサンプル

background-size:10% 10%を使用した場合のサンプル

background-size:90% 90%を使用した場合のサンプル

上記のようにbackground-positionを指定した場合、画像が見えている場所をコントロールすることができます。基本的にはleft,right,centerの３つを使用することが多いかと思いますが、x方向とy方向などの設定も可能です。

まとめ

今回は、background-positionを使って背景画像の位置調整を行う方法についてご紹介させていただきました。レスポンシブ対応にした場合は、background-size:coverを使用して、画面サイズが小さくしていく際に、今回ご紹介させていただいたbackground-positionを指定することで画像が切れていく方向を設定するとより良いかと思います。