SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.04.24
  • CATEGORY
TITLE

【CSS】 background-repeatを学び背景画像の繰り返しを指定しよう!

SHU[シュウ]

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

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

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • background-repeatの使い方について学びたい方へ
  • repeat、repeat-x、repeat-yでの指定方法について解説しております

上の図のように、赤で囲ったリンゴの背景画像を繰り返しの指定ができます。
repeatプロパティでは「X方向」、「Y方向」などの指定が可能になり、指定方法もとても簡単です

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

background-repeatについて

background-repeatについて

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

指定できる値
  • repeat
    初期値になります:背景画像が繰り返し表示され、指定の要素からはみ出た部分は表示しません
  • repeat-x
    背景画像がX方向「水平」に繰り返し表示されます
  • repeat-y
    背景画像がY方向「垂直」に繰り返し表示されます
  • space
    「repeat」と違い、指定要素からはみ出ないように間隔を調整し表示されます
  • round
    「repeat」と違い、指定要素からはみ出ないように画像サイズを調整し表示されます
  • no-repeat
    背景画像を一回だけ表示してリピートはしません

background-repeat指定方法について

background-repeat指定方法について

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

セレクタ {
	background-repeat: 値;
}

ただし、background-repeatプロパティだけでは使用しません。
背景画像を指定する「background-image」などと組み合わせて使用します。

repeatについて

repeat
初期値になります:背景画像が繰り返し表示され、指定の要素からはみ出た部分は表示しません

repeat指定

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

repeat-xについて

repeat-xについて
背景画像がX方向「水平」に繰り返し表示されます

repeat-x指定

repeat-x指定について
<div class="inner">
	<div class="box">repeat-x指定について</div>
</div>
.inner {
	color: #fff;
	background-color: #24422b;  /* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	/*--省略--*/
	background-image: url(画像のパス);  /* 背景画像の指定 */
    background-repeat: repeat-x;    /* 背景画像の繰り返しの指定 */
}

repeat-yについて

repeat-yについて
背景画像がY方向「垂直」に繰り返し表示されます

repeat-y指定

repeat-y指定について
<div class="inner">
	<div class="box">repeat-y指定について</div>
</div>
.inner {
	color: #fff;
	background-color: #24422b;  /* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	/*--省略--*/
	background-image: url(画像のパス);  /* 背景画像の指定 */
    background-repeat: repeat-y;    /* 背景画像の繰り返しの指定 */
}

spaceについて

spaceについて
「repeat」と違い、指定要素からはみ出ないように間隔を調整し表示されます

space指定

space指定について
<div class="inner">
	<div class="box">space指定について</div>
</div>
.inner {
	color: #fff;
	background-color: #24422b;  /* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	/*--省略--*/
	background-image: url(画像のパス);  /* 背景画像の指定 */
    background-repeat: space;      /* 背景画像の繰り返しの指定 */
}

roundについて

roundについて
「repeat」と違い、指定要素からはみ出ないように画像サイズを調整し表示されます

round指定

round指定について
<div class="inner">
	<div class="box">round指定について</div>
</div>
.inner {
	color: #fff;
	background-color: #24422b;  /* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	/*--省略--*/
	background-image: url(画像のパス);  /* 背景画像の指定 */
    background-repeat: round;      /* 背景画像の繰り返しの指定 */
}

no-repeatについて

no-repeatについて
背景画像を一回だけ表示してリピートはしません

no-repeat指定

no-repeat指定について
<div class="inner">
	<div class="box">no-repeat指定について</div>
</div>
.inner {
	color: #fff;
	background-color: #24422b;  /* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	/*--省略--*/
	background-image: url(画像のパス);  /* 背景画像の指定 */
    background-repeat: no-repeat;    /* 背景画像の繰り返しの指定 */
}

簡単に背景を作れるパターンジェネレーターのご紹介

patternify
私もよく使用しています。ピクセル(10×10)でシンプルなパターンを作成するツールになります。
CSSを自動で生成してくれコードを貼るだけで簡単に使用可能になります。

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

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

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

水平方向、垂直方向での指定方法について解説しております。

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

まとめ

今回はこれで以上です。

POINT
  • background-repeat指定した要素の背景画像を繰り返しの指定をします
  • 繰り返しで使用する画像は軽いサイズのものを使用しましょう。
    表示速度が遅くなる可能性があります
スポンサーリンク

SHU

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

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top