background-repeat

背景画像の繰り返し表示に関する設定を行います。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ background-repeat : 値; }

▲PageTop

指定できる値

値 初期値 意味
repeat ○ 全体にタイル状に広がります。
repeat-x 横一直線に繰り返します。
repeat-y 縦一直線に繰り返します。
no-repeat 繰り返しをしません。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        background-repeat : repeat;
      }
      #sample2 {
        background-repeat : repeat-x;
      }
      #sample3 {
        background-repeat : repeat-y;
      }
      #sample4 {
        background-repeat : no-repeat;
      }
      #sample div {
        background-image : url(../../../../images/development/htmlcss/background-sample.gif);
        border : solid 1px #cccccc;
        margin-right : 10px;
        height : 200px;
        width : 200px;
        float : left;
      }
    </style>
  </head>
  <body>
    <div id="sample">
      <div id="sample1">【 repeat 】</div>
      <div id="sample2">【 repeat-x 】</div>
      <div id="sample3">【 repeat-y 】</div>
      <div id="sample4">【 no-repeat 】</div>
      <br style="clear : left;">
    </div>
  </body>
</html>

表示結果

【 repeat 】
【 repeat-x 】
【 repeat-y 】
【 no-repeat 】

▲PageTop

関連項目

CSS

background-image

▲PageTop

▲