CSS background position 場所を指定するサンプル

目次	background position
	right bottom(右下)を指定
	数値+% 数値+%を指定
	数値+単位(px) 数値+単位(px)を指定

background position

背景画像の場所を指定するサンプルです。
画像の表示は高さ(height)が必要です。

書き方	background : url(画像) no-repeat 値等
	background-position : 値
値	top、bottom、left、right、center topは上、bottomは下、leftは左、rightは右、centerは中央に配置する。
	right bottom等連続して指定することも可能。
	数値+% 数値+% 1つめの引数が左からの距離、2つめの引数が上からの距離。左上が0% 0%。
	数値+単位(px等) 数値+単位(px等) 1つめの引数が左からの距離、2つめの引数が上からの距離。
初期値	0% 0%
継承	なし
参考(MDN)	https://developer.mozilla.org/ja/docs/Web/CSS/background

right bottom(右下)を指定

<style>
  .c1 {
    background: url(./img/test1.png) no-repeat right bottom;
    /*   background: url(./img/test1.png) no-repeat;*/
    /*   background-position: right bottom;*/
    height: 100px;
    width: 200px;
    border: 1px solid #000;
  }
</style>
<div class="c1"></div>

4,5行目も3行目と同じ結果になります。

数値 + % 数値+%を指定

<style>
  .c1 {
    background: url(./img/test1.png) no-repeat 15% 65%;
    /*     background: url(./img/test1.png) no-repeat;*/
    /*    background-position: 15% 65%;*/
    height: 100px;
    width: 200px;
    border: 1px solid #000;
  }
</style>
<div class="c1"></div>

4,5行目も3行目と同じ結果になります。

数値 + 単位(px) 数値+単位(px)を指定

<style>
  .c1 {
    background: url(./img/test1.png) no-repeat 15px 35px;
    /*    background: url(./img/test1.png) no-repeat;*/
    /*    background-position: 15px 35px;*/
    height: 100px;
    width: 200px;
    border: 1px solid #000;
  }
</style>
<div class="c1"></div>

4,5行目も3行目と同じ結果になります。