【background-position】の使い方
背景画像の表示位置も外部CSSで指定することで、HTMLソースがスッキリして、SEO内部対策として検索エンジン最適化に有効です。
SEO初心者でも簡単に検索エンジン上位表示ができるようにHTMLとCSSのソースサンプルを幾つかご紹介しますので、アクセスアップにお役立て下さい。
【background-position】の書式
background-position: 値; /*水平、垂直方向を同じ設定。*/
background-position: 値 値; /*水平と垂直を別々に指定。*/
- 背景画像の表示位置を指定する時は、キーワード、数値、パーセントで指定する。
- 数値やパーセントの値を１つだけ指定する場合は、左上を基準にし、値が２つの場合は、左端、上端の順に指定する。
- 相対的単位；px % em ex
- 絶対的単位；pt mm cm in pc
- background-imageとbackground-repeatを併用して背景画像を指定する。
※実際の表示や見え方は、ブラウザや使用環境に依存します。
また、SEO対策に不要と思われる値やキーワードは、独断で掲載していませんので予めご了承下さい。
【background-position】のキーワード（値）
| キーワード（値） | 見え方 |
|---|---|
| left | 左揃え |
| center | 中央揃え |
| right | 右揃え |
| top | 上揃え |
| bottom | 下揃え |
【background-position】の使用例
「セレクタ名」と「値」は、お好みで指定して下さい。
<body>背景画像の表示を「no-repeat」位置を「left、top」に指定
▼ 表示
・sample-image；
▼ HTML
<body> <p>「<body>」の設定は、基本セレクタで指定しています。HTMLのコピペは不要で、CSSのみコピペすると指定できます。</p> </body>
▼ CSS
body {
background-image: url(bari01.jpg);
background-repeat: no-repeat;
background-position: left;
}
<body>背景画像の表示を「no-repeat」位置を「center、bottom」に指定
▼ 表示
・sample-image；
▼ HTML
<body> <p>「<body>」の設定は、基本セレクタで指定しています。HTMLのコピペは不要で、CSSのみコピペすると指定できます。</p> </body>
▼ CSS
body {
background-image: url(bari01.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
<body>背景画像の表示を「no-repeat」位置を「300px、20px」に指定
▼ 表示
・sample-image；
▼ HTML
<body> <p>「<body>」の設定は、基本セレクタで指定しています。HTMLのコピペは不要で、CSSのみコピペすると指定できます。</p> </body>
▼ CSS
body {
background-image: url(bari01.jpg);
background-repeat: no-repeat;
background-position: 300px 20px;
}
<body>背景画像の表示を「repeat-x」位置を「bottom」に指定
▼ 表示
・sample-image；
▼ HTML
<body> <p>「<body>」の設定は、基本セレクタで指定しています。HTMLのコピペは不要で、CSSのみコピペすると指定できます。</p> </body>
▼ CSS
body {
background-image: url(back-sampleimage01.gif);
background-repeat: repeat-x;
background-position: bottom;
}