SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.04.26
  • CATEGORY
TITLE

【CSS】background-positionを学び背景画像の位置を指定しよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は「【CSS】background-positionを学び背景画像の位置を指定しよう!」
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • background-positionの使い方について学びたい方へ
  • 背景画像の位置について解説をしております

上の図のように、リンゴの背景画像の位置が指定ができます。
position = 位置となり「水平方向、垂直方向」の指定が可能になります。指定方法もとても簡単です

主なbackgroundプロパティ
  • background-color 
    解説の記事ありますよ
    指定した要素の背景の色を指定します
  • background-image 
    解説の記事ありますよ
    指定した要素の背景画像を指定します
  • background-repeat 
    解説の記事ありますよ
    背景画像の繰り返しを指定します
  • background-position 
    今回はここを解説!
    背景画像の位置を指定します
  • background-size 
    解説の記事ありますよ
    背景画像のサイズを指定します

background-positionについて

background-positionについて

基本的な記述方法としては
background-position値になります。

指定できる値
  • キーワード(水平方向)
    left、center、rightの位置を指定します
  • キーワード(垂直方向)
    top、center、bottomの位置を指定します
  • %の指定
    指定要素のサイズに対しての割合で指定します
  • 数値+単位の指定
    「px、em」などの数値+単位で指定します

background-position指定方法について

上の図では、ブラウザを9分割して考えると理解度が早く覚えます。
水平方向には「left、center、right」が適応され
垂直方向には「top、center、bottom」が適応されます。

background-positionは下記のように指定します。

セレクタ {
	background-position: 水平方向の値 垂直方向の値;
}

ただし、background-positionプロパティだけでは使用しません。
背景画像を指定する「background-image」などと一緒に使用します。

水平方向の値について

水平方向の値について

水平方向の値についてデモでは垂直方向は「top」に指定しております。
left(水平方向 0%の位置)

left (水平方向 0%の位置)

left指定について
<div class="inner">
	<div class="box">left(水平方向)指定について</div>
</div>
.inner {
	color: #fff;
	background-color: #24422b;  /* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	width: 80%;
	padding: 80px 0px;
	text-align: center;
	margin: 0 auto;
	border: solid 2px #ffffff;
	background-image: url(画像のパス); /* 背景画像の指定 */
	background-position: left top;  /* 背景画像の位置の指定 */
    background-repeat: no-repeat;  /* 背景画像の繰り返しの指定 */
}

center (水平方向 50%の位置)

center (水平方向 50%の位置)

center指定について
<div class="inner">
	<div class="box">center(水平方向)指定について</div>
</div>
.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background-image: url(画像のパス);  /* 背景画像の指定 */
	background-position: center top;  /* 背景画像の位置の指定 */
    background-repeat: no-repeat;    /* 背景画像の繰り返しの指定 */
}

right (水平方向 100%の位置)

right (水平方向 100%の位置)

right指定について
<div class="inner">
	<div class="box">right(水平方向)指定について</div>
</div>
.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background-image: url(画像のパス);  /* 背景画像の指定 */
	background-position: right top;   /* 背景画像の位置の指定 */
    background-repeat: no-repeat;    /* 背景画像の繰り返しの指定 */
}

垂直方向の値について

垂直方向の値について

垂直方向方向の値について デモでは水平方向は「center」に指定しております。

top(垂直方向 0%の位置)

top (垂直方向 0%の位置)

top指定について
<div class="inner">
	<div class="box">top (垂直方向 0%の位置)</div>
</div>
.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background-image: url(画像のパス);   /* 背景画像の指定 */
	background-position: center top;    /* 背景画像の位置の指定 */
    background-repeat: no-repeat;      /* 背景画像の繰り返しの指定 */
}

center(垂直方向 50%の位置)

center (垂直方向 50%の位置)

center指定について
<div class="inner">
	<div class="box">center (垂直方向 50%の位置)</div>
</div>
.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background-image: url(画像のパス);    /* 背景画像の指定 */
	background-position: center center;  /* 背景画像の位置の指定 */
    background-repeat: no-repeat;      /* 背景画像の繰り返しの指定 */
}

bottom(垂直方向 100%の位置)

bottom (垂直方向 100%の位置)

bottom指定について
<div class="inner">
	<div class="box">bottom (垂直方向 100%の位置)</div>
</div>
.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background-image: url(画像のパス);    /* 背景画像の指定 */
	background-position: center bottom;  /* 背景画像の位置の指定 */
    background-repeat: no-repeat;      /* 背景画像の繰り返しの指定 */
}

%(パーセント)指定方法について

%(パーセント)指定要素のサイズに対しての割合で指定します。
左上の基準の距離ではなく、画像内の位置と要素内の位置をイメージです。

%(パーセント)指定方法

%(パーセント) 指定方法

25% 25%
50% 50%
50% 75%
<div class="inner">
	<div class="box">%(パーセント)指定</div>
</div>
.inner { /*--省略--*/ }
.box01, .box02, .box03 {
	width: 200px;
	height: 200px;
}
.box01 {
	/*--省略--*/
	background-image: url(画像のパス);  /* 背景画像の指定 */
	background-position: 25% 25%;   /* 背景画像の位置の指定 */
    background-repeat: no-repeat;    /* 背景画像の繰り返しの指定 */
}
.box02 {
	/*--省略--*/
	background-image: url(画像のパス);  /* 背景画像の指定 */
	background-position: 50% 50%;   /* 背景画像の位置の指定 */
    background-repeat: no-repeat;    /* 背景画像の繰り返しの指定 */
}
.box03 {
	/*--省略--*/
	background-image: url(画像のパス);  /* 背景画像の指定 */
	background-position: 50% 75%;   /* 背景画像の位置の指定 */
    background-repeat: no-repeat;    /* 背景画像の繰り返しの指定 */
}

数値+単位の指定方法について

数値+単位の指定方法について

数値+単位「px、em」などの数値+単位で指定します。
数値の単位は、px、emなどがあります。数値で指定する際には、左上が基準となります。

数値+単位の指定方法

25px 25px
50px 30px
75px 50px
<div class="inner">
	<div class="box">数値+単位の指定方法</div>
</div>
.inner { /*--省略--*/ }
.box01, .box02, .box03 {
	width: 200px;
	height: 200px;
}
.box01 {
	/*--省略--*/
	background-image: url(画像のパス);    /* 背景画像の指定 */
	background-position: 25px 25px;   /* 背景画像の位置の指定 */
    background-repeat: no-repeat;     /* 背景画像の繰り返しの指定 */
}
.box02 {
	/*--省略--*/
	background-image: url(画像のパス);    /* 背景画像の指定 */
	background-position: 50px 30px;   /* 背景画像の位置の指定 */
    background-repeat: no-repeat;     /* 背景画像の繰り返しの指定 */
}
.box03 {
	/*--省略--*/
	background-image: url(画像のパス);    /* 背景画像の指定 */
	background-position: 75px 50px;   /* 背景画像の位置の指定 */
    background-repeat: no-repeat;     /* 背景画像の繰り返しの指定 */
}

組み合わせの指定方法について

right 25px bottom 25px

right 25px bottom 25px

組み合わせの指定について
<div class="inner">
	<div class="box">組み合わせの</div>
</div>
.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background-image: url(画像のパス);          /* 背景画像の指定 */
	background-position: right 25px bottom 25px;  /* 背景画像の位置の指定 */
    background-repeat: no-repeat;            /* 背景画像の繰り返しの指定 */
}

CSSプロパティ参考になるかも

repeat、repeat-x、repeat-yについて解説しております。

基本的な記述方法や透過について解説しております。

基本的な記述方法、相対パス、絶対パスについて解説しております。

auto、contain、coverなどの指定について解説しております。

まとめ

今回はこれで以上です。

POINT
  • background-position指定した要素の背景画像の位置を指定します
  • %での指定は指定要素のサイズに対しての割合で指定します
  • 「px、em」での指定はは、背景画像の左上が基準となります
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top