こんにちは、@AWAKOJIです。
今日も、薬剤師をしながらプログラミングの勉強をしています。
この記事では、webサイトに表示した背景画像の位置(background-position プロパティ)の設定について解説します。
このプロパティを使うことで、background-imageプロパティによって表示される画像の位置を調整することができます。
うまく利用して見やすいwebサイトを目指しましょう。
この記事の内容
使用する言語はCSS
背景画像の繰り返しを設定するにはCSSを使います。
CSSとは、webサイトのデザインを担当する言語です。
詳しくはこちらの記事をどうぞ。

使用するプロパティはbackground-position
CSSの基本構造は以下の通りです。
そして今回、背景画像の繰り返しを設定するため、background-repeatプロパティを使います。
“background”(背景)
“position”(位置)
なので覚えやすいですね!
また、横方向と縦方向の位置を表示する必要があるため、値は2つ書く必要があります。
つまり背景画像の繰り返しを設定するための基本構造は以下のとおりになります。
値と値の間は半角スペースを空けてください。
以下、background-positionプロパティを使うときのセレクタと値について解説していきます。
background-positionのセレクタ
background-imageプロパティと同様、セレクタにはすべての要素を書くことができます。
つまり、背景画像の表示位置は
body⇒サイト全体
h1⇒見出し
table⇒表
tr⇒表の行
div⇒ブロックレベル要素
span⇒インライン要素
など、どの場所にも設定できるというわけです。
background-positionの値
値に書けるのは
- キーワード
- 数値
の2つです。
それぞれ見ていきます。
キーワード
値にキーワードを用いることができます。
具体的には、
- 横方向⇒left(左)、center(中央)、right(右)
- 縦方向⇒top(上)、center(中央)、bottom(下)
です。
実際に表示位置を確認してみましょう。
HTMLファイルは以下の通りです。
headタグ内でCSSファイル(sample.css)を読み込んでください。
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>background-repeatサンプル</title> <link rel="stylesheet" href="./sample.css"> </head> <body> <p>サンプルです。</p> <p>値の違いを見ていきます。</p> </body> </html> |
CSSファイル(sample.css)は以下の通りです。
1 2 3 4 5 6 7 |
body{ background-image:url(./waterball.png); background-repeat:no-repeat; } html,body{ height:100%; } |
background-imageプロパティで水玉の画像ファイル(waterball.png)を設定しています。
水玉の画像(waterball.png)
そして、background-repeatプロパティの値をno-repeatにすることで画像の表示を1つだけにしてください。
それぞれのプロパティについて詳しく知りたい方は以下の記事をご覧ください。


さらに、最後に5行目にbodyの領域をwebサイト全体にすることで、背景画像がうまく挙動するようにしています。
この状態のブラウザ表示は以下の通りです。
※ブラウザ表示(クリックで拡大表示します)
背景画像の表示の起点は左上なので、水玉は左上に1つだけ表示されています。
この状態で、background-positionプロパティをたしていきます。
①横方向をleft、縦方向をtopに指定します。
1 2 3 4 5 6 7 8 |
body{ background-image:url(./waterball.png); background-repeat:no-repeat; background-position:left top; } html,body{ height:100%; } |
※ブラウザ表示(クリックで拡大表示します)
もともと起点が左上なので表示位置は変わっていません。
②次に横方向をcenter、縦方向をcenterに指定します。
1 2 3 4 5 6 7 8 |
body{ background-image:url(./waterball.png); background-repeat:no-repeat; background-position:center center; } html,body{ height:100%; } |
※ブラウザ表示(クリックで拡大表示します)
水玉が中央に表示されました。
③そして、横方向をright、縦方向をbottomに指定します。
1 2 3 4 5 6 7 8 |
body{ background-image:url(./waterball.png); background-repeat:no-repeat; background-position:right bottom; } html,body{ height:100%; } |
※ブラウザ表示(クリックで拡大表示します)
水玉が右下に表示されました。
数値
画像の表示位置を指定するために数値を書くことができます。
表示領域の左上から画像の左上の距離を書きます。
数値の単位は、px、cm、ch、emなどがあります。
pxを使って表示位置をみてみます。
1 2 3 4 5 6 7 8 |
body{ background-image:url(./waterball.png); background-repeat:no-repeat; background-position:300px 400px; } html,body{ height:100%; } |
画像の左上の位置が、表示領域の左上から横に300px、縦に400pxの位置になるように表示されました。
%で表示位置を設定することもできます。
表示領域の座標に画像の座標が重なるように表示されます。
よくわからないと思うので実際にみてみます。
①『0% 0%』の指定をします。
1 2 3 4 5 6 7 8 |
body{ background-image:url(./waterball.png); background-repeat:no-repeat; background-position:0% 0%; } html,body{ height:100%; } |
※ブラウザ表示(クリックで拡大表示します)
②『50% 50%』の指定をします。
1 2 3 4 5 6 7 8 |
body{ background-image:url(./waterball.png); background-repeat:no-repeat; background-position:50% 50%; } html,body{ height:100%; } |
※ブラウザ表示(クリックで拡大表示します)
③『100% 100%』の指定をします。
1 2 3 4 5 6 7 8 |
body{ background-image:url(./waterball.png); background-repeat:no-repeat; background-position:100% 100%; } html,body{ height:100%; } |
※ブラウザ表示(クリックで拡大表示します)
表示領域の座標と画像の座標が重なるように表示されます。
つまり
- 0% 0% = left top
- 50% 50% =center center
- 100% 100% =right bottom
と同じ意味になります。
値の省略
background-positionプロパティで指定する値は省略することができます。
- leftまたはrightだけ(横方向のみの記載)⇒縦方向はcenter
- topまたはbottomだけ(縦方向のみの記載)⇒横方向はcenter
- centerだけ⇒中央表示
- 数値だけ⇒横方向はcenter
表示の起点について
値を数値にしたときの起点は、表示領域の左上です。
もう少し詳しくいうと、padding領域の左上です。
この起点を右下にすることもできます。
1 2 3 4 5 6 7 8 |
body{ background-image:url(./waterball.png); background-repeat:no-repeat; background-position:right 100px bottom 100px; } html,body{ height:100%; } |
※ブラウザ表示(クリックで拡大表示します)
また、background-originプロパティを使うと起点を変えることもできます。
まとめ
以上、background-positionプロパティについて説明しました。
まとめると、
- 画像の繰り返しの設定はCSSを使う
- プロパティはbackground-position
- セレクタはすべての要素を書くことができる
- 横方向の値はleft、center、right、数値(pxや%など)
- 縦方向の値はtop、center。bottom、数値(pxや%など)
- 表示の基準点はpadding領域の左上だが変更することもできる
以上になります。
参考サイト:background-position – MDN – Mozilla
【無料体験・全額返金】圧倒的に効率的なプログラミングスクール
独学でプログラミングを勉強するのは大変じゃないですか?
- ググるのが面倒
- エラーの対応に1日消費
- 重要なコードがわからない
お金はかからないものの、かなり効率が悪いです。
『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。
代表的なスクールは以下の2つ。
- TechAcademy
web系、アプリ系いずれもOK
完全オンラインでプログラミングを学習したい方 - テックキャンプ
web系、アプリ系いずれもOK
教室またはオンラインで学習したい方
この2つには以下のような特典もあります。
TechAcademy
- 1週間の無料体験
- 1コース申し込むと、もう1コースプレゼント
テックアカデミー
- 1週間以内に申告あれば全額返金
- 転職できなかったら全額返金
かなりお得です。
確かにどのスクールも本格的にやれば20~30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。
目安の報酬をまとめておくと、
- ランサーズ:1件10万くらい
- 中小企業:1件30万くらい
- 大手企業:桁違い
こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。
この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。
テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。