background-repeatプロパティ

TOPページに戻る > CSS

スポンサード リンク

background-repeatプロパティ

背景画像の繰り返しのスタイルを指定できます
1枚だけ表示、縦だけ繰り返し表示、横だけ繰り返し表示、縦と横に繰り返し背景を敷き詰めることが可能

使い方(書式)

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

background-repeatプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 しない

プロパティの値 説明
repeat 画像を縦と横に繰り返す。画像を敷き詰める
background-repeatを指定しなかった場合の初期値
repeat-x 横に画像を繰り返す
repeat-y 縦に画像を繰り返す
no-repeat 画像を繰り返さない。1枚だけ表示

実際の指定方法

.hoge { 
 background-repeat: repeat;       /* 背景画像を敷き詰める */
 background-image: url(maru.gif); /* 背景画像の指定 */
 height: 150px ;                  /* 要素の縦の高さ */
 }

.hoge2 {
 background-repeat: repeat-x;     /* 横に画像を繰り返す */
 background-image: url(maru.gif); /* 背景画像の指定 */
 height: 150px ;                  /* 要素の縦の高さ */
  }

.hoge3 {
 background-repeat: repeat-y;     /* 縦に画像を繰り返す */
 background-image: url(maru.gif); /* 背景画像の指定 */
 height: 150px ;                  /* 要素の縦の高さ */
  }
.hoge4 {
 background-repeat: no-repeat;    /* 1枚だけ表示 */
 background-image: url(maru.gif); /* 背景画像の指定 */
 height: 150px ;                  /* 要素の縦の高さ */
 }

html部分

<div class="hoge">repeat</div>
<div class="hoge2">repeat-x</div>
<div class="hoge3">repeat-y</div>
<div class="hoge4">no-repeat</div>

実際の表示

repeat
repeat-x
repeat-y
no-repeat




(C)2012 ホームページ作成無料