今回は「【CSS】 background-repeatを学び背景画像の繰り返しを指定しよう!」
についての解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
background-repeat
の使い方について学びたい方へ - repeat、repeat-x、repeat-yでの指定方法について解説しております
上の図のように、赤で囲ったリンゴの背景画像を繰り返しの指定ができます。
repeatプロパティでは「X方向」、「Y方向」などの指定が可能になり、指定方法もとても簡単です
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-image」などと組み合わせて使用します。
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方向「水平」に繰り返し表示されます
<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方向「垂直」に繰り返し表示されます
<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」と違い、指定要素からはみ出ないように間隔を調整し表示されます
<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」と違い、指定要素からはみ出ないように画像サイズを調整し表示されます
<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に関する様々な情報を発信しています。
最新記事
関連記事