CSS背景 - ページや要素の背景画像の並べ方 | background-repeat

2008/05/28 20:05更新
TAGS: CSS | 背景画像 | background-repeat

本文は背景関連のCSS属性 background-repeat（背景画像の並べ方） について学びたいと思います。

背景関連のCSS属性：
◇ background-color
◇ background-image
◇ background-repeat
◇ background-attachment
◇ background-position
◇ background

前回の記事：
CSS背景 - ページや要素の背景画像の設定
では、CSSのbackground-image属性で要素の背景画像の設定について学びました。

background-image属性デフォルトでは、画像を縦横両方向に、繰り返し並べて表示するようになっています。
それを制御するには、background-repeat属性を用います。

background-repeat属性


CSSのbackground-repeat属性は要素の背景画像の並べ方を指定します。

background-repeat属性の値


■repeat
    画像を縦横両方向に、繰り返し並べます(デフォルト)。
■repeat-x
    画像を横方向のみに、繰り返し並べます。
■repeat-y
    画像を縦方向のみに、繰り返し並べます。
■no-repeat
    画像を並べません。一個の画像のみが表示されます。

background-repeat CSS定義例


body {
    background-image: url("somepic.gif");
    background-repeat:repeat-x;
}

h1 {
    background-color: #FFCC66;
    background-image: url("somepic.gif");
    background-repeat:repeat-y;
}

.somecls {
    background-image: url("somepic.gif");
    background-repeat:no-repeat;
}


要素のstyle属性を用いた場合（非推奨）、次のようになります。
style属性記事例：
<p style="background-image: url('somepic.gif');background-repeat:repeat-y;">
 背景画像の指定とその並べ方例
</p>


background-repeat属性の使用例


次の画像を例として説明したいと思います。
/css/filem/images/category.gif：

background-image: url("/css/filem/images/category.gif");


■background-repeat:repeat-x;の場合の表示：


背景画像の指定とその並べ方例






背景画像の指定とその並べ方例



■background-repeat:repeat-y;の場合の表示：


背景画像の指定とその並べ方例






背景画像の指定とその並べ方例



■background-repeat:no-repeat;の場合の表示：


背景画像の指定とその並べ方例






背景画像の指定とその並べ方例



■background-repeat:repeat;の場合またはデフォルト場合の表示：


背景画像の指定とその並べ方例






背景画像の指定とその並べ方例

著者について
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Sponsored Link


コメント

  • 関連記事