背景画像の並べ方を指定;background-repeat

【background-repeat】の使い方

画像の並べ方も外部CSSで指定することで、HTMLソースがスッキリして、SEO内部対策として検索エンジン最適化に有効です。
SEO初心者でも簡単に検索エンジン上位表示ができるようにHTMLCSSのソースサンプルを幾つかご紹介しますので、アクセスアップにお役立て下さい。

【background-repeat】の書式

background-repeat: 値;

  • 背景画像の並べ方を指定する時は、キーワードで指定する。

※実際の表示や見え方は、ブラウザや使用環境に依存します。
また、SEO対策に不要と思われる値やキーワードは、独断で掲載していませんので予めご了承下さい。

【background-repeat】のキーワード(値)

キーワード(値) 見え方
repeat 画像をタイル状に繰り返し表示。(デフォルト)
repeat-x 画像を水平方向のみ繰り返して表示。
repeat-y 画像を垂直方向のみ繰り返して表示。
no-repeat 画像を1つだけ表示。

【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;
}

スポンサードリンク

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>