背景画像の繰り返し方法を指定するbackground-repeatプロパティ
background-repeat

 背景画像の繰り返し方法を指定できます。もちろん、このプロパティは背景画像を指定しているのが前提です。

 HTMLの<img>要素と違い、背景画像として指定しているので、デフォルトでは縦横方向に敷き詰める形で表示されます。

 このプロパティを使用する一番のメリットは、画像サイズを小さくすることができ、Webブラウザがそのページを読み込む時間を短縮できる点です。

 例えば、コンテンツ全体に背景画像を指定したい場合、そのコンテンツサイズの大きい一枚の画像を使用するか、小さい画像を繰り返してコンテンツサイズに表示するかの違いです。つまり、画像サイズ分の読み込み時間の違いが出てきます。もちろん、繰り返し表示しても違和感の無いデザインにする必要がありますが。

 また、繰り返しで表示しておけば、コンテンツの内容が増えた場合でも、背景画像を作り直す必要がないのもメリットの1つです。

基本データ

構文 セレクタ{background-repeat:値;}
継承 ×
相対的なサイズをキーワードを使って指定する場合
repeat、repeat-x、repeat-y、no-repeat
親から継承させる場合
inherit
効果 背景画像の繰り返し方法を指定できる
初期値 repeat
適用箇所 すべての要素

ほげほげですね。

p { background-image: url(../images/icon_s.gif);background-repeat: repeat-x;}

動作Webブラウザ

Internet Explorer 5.5、6.0、7.0、8.0以上
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.backgroundRepeat

jQueryを使った参照方法

$('【セレクタ】').css('background-image','【値】');
$('【セレクタ】').css({'background-image':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

デザインハック 記事ランキング

本日 月間
ソリューションFLASH