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

背景画像の場所を指定するサンプルです。

書き方 background : url(画像) no-repeat 値 等
background-position : 値
top、bottom、left、right、center
topは上、bottomは下、leftは左、rightは右、centerは中央に配置する。
right bottom等連続して指定することも可能。
right bottom(右下)を指定
数値+% 数値+%
1つめの引数が左からの距離、2つめの引数が上からの距離。
左上が0% 0%。
数値+単位(px等) 数値+単位(px等)
1つめの引数が左からの距離、2つめの引数が上からの距離。
初期値 0% 0%
継承 なし
備考 画像の表示は高さ(height)が必要
参考(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)を指定

<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行目と同じ結果になります。

関連の記事

CSS background 背景色を指定するサンプル
CSS background repeat 背景画像の繰り返しを指定

△上に戻る