background-positionプロパティを利用して背景画像を右寄せします。Y軸方向の位置は中央寄せにします。単純な右寄せであればbackground-position: right center;を指定します。
デモページはこちら
.div01 {
width: 100%;
height: 300px;
margin: 0 0 1em;
background-color: darkslateblue;
background-image: url(../img/bg_truck.png);
background-repeat: no-repeat;
background-size: auto 200px;
background-position: right center;
}
背景画像を右寄せした位置からX軸方向へ移動させる場合は、キーワードrightの後にpxで数値指定します。マイナスの値を指定することで親要素からはみ出すこともできます。なお親要素にoverflow: hidden;を指定しなくても横スクロールバーは発生しません。
.div02 {
width: 100%;
height: 300px;
margin: 0 0 1em;
background-color: darkslateblue;
background-image: url(../img/bg_truck.png);
background-repeat: no-repeat;
background-size: auto 200px;
background-position: right -50px center;
}
なお、right centerのようなキーワードでの指定は順番が逆でも正常に動作します。ただし、パーセントで指定する場合はX軸方向→Y軸方向の順番で指定する必要があります。
background-positionプロパティを指定しなかった場合は、初期値の0% 0%(左上のleft topの位置)が適用されます。





