TIL

Today I Learned. 知ったこと、学んだことを書いていく

画像の表示位置の設定 background-position - CSS

CSS

background-positionプロパティを使うことで画像を表示する開始位置を設定できる。

background-repeat: no-repeat;のときに使うことが多いらしい。

background-position: xの位置 yの位置;と記述する

値の指定方法

値の指定方法は３つある

  • キーワードで指定
  • %で指定
  • 数値で指定

キーワードで指定

.main {
    background-position: left center;
}

xに指定可能なキーワード

  • left(0%と同じ)
  • center(50%と同じ)
  • right(100%と同じ)

yに指定可能なキーワード

  • top(0%と同じ)
  • center(50%と同じ)
  • bottom(100%と同じ)

キーワードの場合、xとyの順序はあまり関係ないのかも。background-position: bottom left;でもいけた。

数値で指定

.main {
    background-position: left 10px top 40px;
}

面白いと思ったのは、数値で指定するときの記述の仕方

10pxではなく、left 10pxと記述すると左から10px、right 10pxと記述すると右から10pxという意味になる！！！

場所と数値を記述するとわかりやすい！！！左右対称で表示位置を設定したいときに使えるかも！！

例）左右対称で表示するとき

.main {
    background-position: left 10px top 40px;
    background-position: right 10px bottom 40px;
}

参考文献

background-position－スタイルシートリファレンス

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)