【background-repeat】の使い方
画像の並べ方も外部CSSで指定することで、HTMLソースがスッキリして、SEO内部対策として検索エンジン最適化に有効です。
SEO初心者でも簡単に検索エンジン上位表示ができるようにHTMLとCSSのソースサンプルを幾つかご紹介しますので、アクセスアップにお役立て下さい。
【background-repeat】の書式
background-repeat: 値;
- 背景画像の並べ方を指定する時は、キーワードで指定する。
※実際の表示や見え方は、ブラウザや使用環境に依存します。
また、SEO対策に不要と思われる値やキーワードは、独断で掲載していませんので予めご了承下さい。
【background-repeat】のキーワード（値）
| キーワード（値） | 見え方 |
|---|---|
| repeat | 画像をタイル状に繰り返し表示。（デフォルト） |
| repeat-x | 画像を水平方向のみ繰り返して表示。 |
| repeat-y | 画像を垂直方向のみ繰り返して表示。 |
| no-repeat | 画像を１つだけ表示。 |
【background-repeat】の使用例
「セレクタ名」と「値」は、お好みで指定して下さい。
<body>背景画像を「repeat」に指定
▼ 表示
・sample-image；
▼ HTML
<body> <p>「<body>」の設定は、基本セレクタで指定しています。HTMLのコピペは不要で、CSSのみコピペすると指定できます。</p> </body>
▼ CSS
body {
background-image: url(back-sampleimage01.gif);
background-repeat: repeat-x;
}
<body>背景画像を「repeat-x」に指定
▼ 表示
・sample-image；
▼ HTML
<body> <p>「<body>」の設定は、基本セレクタで指定しています。HTMLのコピペは不要で、CSSのみコピペすると指定できます。</p> </body>
▼ CSS
body {
background-image: url(back-sampleimage02.gif);
background-repeat: repeat-x;
}
<body>背景画像を「repeat-y」に指定
▼ 表示
・sample-image；
▼ HTML
<body> <p>「<body>」の設定は、基本セレクタで指定しています。HTMLのコピペは不要で、CSSのみコピペすると指定できます。</p> </body>
▼ CSS
body {
background-image: url(back-sampleimage03.gif);
background-repeat: repeat-x;
}
<body>背景画像を「no-repeat」に指定
▼ 表示
・sample-image；
▼ HTML
<body> <p>「<body>」の設定は、基本セレクタで指定しています。HTMLのコピペは不要で、CSSのみコピペすると指定できます。</p> </body>
▼ CSS
body {
background-image: url(back-sampleimage04.gif);
background-repeat: repeat-x;
}