[13-2] サイトの背景に画像を表示しよう（CSS使用）
最終更新日：2017年10月31日 （初回投稿日：2011年04月21日）
前回はサイトの背景に CSSを使って色を指定しました。
今回は応用バージョン。CSSを使って <body>要素に画像を指定してみましょう。
| 使用する要素 | <body> 〜 </body> |
|---|
| 使用する CSSプロパティ |
background |
|---|
背景画像のリーピートによるバリエーション
CSSで要素の背景に画像を表示するとき、リピート（繰り返し方）の種類があります。
- リピート無しで貼る
- 縦方向（y軸方向）にリピート
- 横方向（x軸方向）にリピート
- 全方向（x軸 y軸の両方とも）にリピート
で、今回作ってみたサンプルのバリエーションはこの5つ。
リピート無し（no-repeat）
では、最初はリピート無しで背景画像を貼ってみますよ。
ちょっと大きめの画像を用意して、このようにウィンドウの右上に配置してみます。
（画像クリックで、実際のファイルが 別ウィンドウで開きます）
（ HTML や CSS のコードは サンプルファイル内に書いてあります）
このサンプルの <body>要素へのCSS指定です。
8行目が 背景の指定。「no-repeat」と書いていますね。
body {
width:100%;
margin:0;
padding:0;
color:#666;
font-family:Century Gothic,'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
line-height:1.6em;
background:url(../img/bg1.gif) no-repeat right top #ede8ea;
}
backgroundプロパティは、実際は「ショートハンドプロパティ」と呼ばれる 複数のプロパティの値をまとめて記述するためのプロパティです。
background: url(../img/bg1.gif) no-repeat right top #ede8ea という書き方は「ショートハンド」と言います。
ショートハンドにする前の書き方は、以下のようになっています。
background-image: url(../img/bg1.gif); /*背景画像のURL*/
background-repeat: no-repeat; /*背景画像のリピート方法*/
background-position: right top; /*背景画像の位置*/
background-color: #ede8ea; /*背景の色*/
これらの「値」だけを、間に「半角スペース」を入れながら、まとめて書くのが「ショートハンド」ってわけです。
上記の CSSの内容は、
画像は、CSSファイルの1つ上のディレクトリ内の、imgというディレクトリ内の bg1.gif というファイル。
リピートは無し。
位置は、x軸方向は右（right）に、y軸方向は上（top）によせて。
背景色は #ede8ea。
と書いています。
★画像のURLの指定についてはこちらをご覧ください。
[10] 絶対URL と 相対URL（絶対パス と 相対パス）
★色指定（ #ede8ea といった書き方）についてはこちらをご覧ください。
[14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）
★CSSの backgroundプロパティについては、こちらに詳細をまとめています。
【15-1】background関連のプロパティ（1/4）
【15-2】background関連のプロパティ（2/4 background-position）
【15-5】backgroundのショートハンド まとめ
backgroundに色指定も同時にします
背景の「画像」と同時に「背景色」も指定していますが、これは、「リピート無し」の場合、画像が貼られない部分もあるから。そこの背景色を指定しておかないと変です。そこだけブラウザデフォルトの色になっちゃって。
ですので、背景画像を用意するときは、サイトの背景になじむように、端の部分を単一色にしておく必要があります。
左上に置くなら 位置（background-position）は省略できます
画像の位置（background-position）の値は「top、bottom、right、left、center」のキーワードや、「%（パーセンテージ）」「単位を付けた数値」で指定します。
デフォルトの位置は 左上（「left top」または「0 0」）です。
ですので、左上を基点に画像を置くなら、background-position の値は省略OK。
background: url(../img/image.gif) no-repeat #ede8ea
background-positionはマイナスの値も指定できます
位置指定（background-position）を「単位を付けた数値」で指定するときには、マイナスの方向の指定も可能です。
このサンプルでは、画像の位置をウィンドウより上に調整しました。
（画像クリックで、実際のファイルが 別ウィンドウで開きます）
こんなかんじで、ウィンドウの上端より上にあげています。
CSSはこちら。Y軸の値をマイナスにするだけです。
body {
width:100%;
margin:0;
padding:0;
color:#666;
font-family:Century Gothic,'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
line-height:1.6em;
background:url(../img/bg2.jpg) no-repeat right -70px #060405;
}
background-position では、値が2つのときは「x方向 y方向」の順と決まっています。（2つともキーワードのときはどっちが先でもOK）
上記の「right -70px」という指定は、「右によせて、上は-70px」という意味です。
これは「100% -70px」と書いても同じです。
background-position のルールは、こちらに詳細を書いています。
【15-2】background関連のプロパティ（2/4 background-position）
縦方向のリピートは「repeat-y」
縦方向（y軸方向）にリピートさせてみましょう。
サンプルはこちら。
（画像クリックで、実際のファイルが 別ウィンドウで開きます）
この画像を縦（ｙ方向）にリピート↓（実サイズは 1100 × 140px）
CSSで「repeat-y」と書きます。
background:url(../img/bg3.gif) repeat-y right #fee;
このサンプルでは、画像を右端によせてリピートしたいので、位置は「right」と書いています。（値が1つなので、2つ目は自動的に「center」になります）
左上からリピートさせたければ、位置は書かなくてOK。デフォルトが左上からなので。
「背景色（#fee）」も指定していますが、これは左側が背景画像なしになるから。画像の左端の色を背景色に指定しています。
横方向のリピートは「repeat-x」
横方向（x軸方向）にリピートさせてみましょう。
サンプルはこちら。
（画像クリックで、実際のファイルが 別ウィンドウで開きます）
配置する画像はこれ↓（20px×600px）これを横方向（x軸方向）にリピートします。
CSSで「repeat-x」と書きます。
background:url(../img/bg4.gif) repeat-x #2e0000;
ここでは開始位置は省略しています。デフォルトの左上からのリピートでいいので。
背景色も指定して、背景画像がない下の方に色を付けています。
全方向にリピートは「repeat」
これがウェブサイトの背景で一番使うかも。
背景画像をタイルのように全面に貼る方法です。
サンプルではフリー素材の背景画像を使ってみました。
400 × 400px の画像を、背景にタイルのように貼っています。
（画像クリックで、実際のファイルが 別ウィンドウで開きます）
画像は「フリー 素材 背景画像 シームレス」などと検索すればドバ〜っと出ます。
紙素材が良ければ検索ワードに「紙」と加えたり、「土壁」「メタル」「レース」とかいろいろやってみて。
サンプルの背景画像はこちらからダウンロードしました。
Subtle Tile Patterns Vol7 | Graphic Web Backgrounds | Pixeden
CSSはとってもシンプルです。
background: url(../img/03-Tile-Hail.png)
background-image の指定だけでいいんです。
全方向にリピートする background-repeat: repeat は デフォルト値なので、書かなくてOK（書かなければ自動的にデフォ値になる）。
位置指定も不要（全方向にタイルのように貼るので）。
背景色も不要（同じく全方向に画像をタイルのように貼るので下地は見えないから）。
ただし、文字を白っぽい色 にしてる場合は、背景色を指定しておいたほうがいいです。
何らかの事情で背景画像が読み込まれなかった時、文字読めないんじゃ意味ないし。
黒っぽい色をベースに敷いておくべき。
次回予告
いかがでしたか？
背景に画像を置くとイメージがグッと変わりますよね。
CSSの「background」の使い方も、何となくつかめたと思います。
次回はまた CSSで グラデーション を背景に指定してみましょう。
今回、画像でグラデーションを作って背景にしていますが、画像ではできない 斜めのグラデーションも、CSSなら可能です。
- 関連記事
-
- [15-2] 番号付きリストを作ろう（ ol要素・li要素）
- [15-1] リストを作ろう（ ul要素・li要素 ）
- [14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）
- [14-3] データの容量を示す単位（バイト、キロバイト、メガバイト）
- [14-2] 画像形式について（GIF、JPEG、PNG の違い）
- [14-1] ブラウザでソースを表示する
- [13-3] サイト背景にCSSで線形グラデーションをつけよう (CSS使用)
- [13-2] サイトの背景に画像を表示しよう（CSS使用）
- [13-1] サイトの背景に色をつけてみよう（CSS使用）
- [12-2] なんでHTMLとCSSはセットなの？
- [12-1] CSSを外部ファイルにしよう
- [11-6] ボタン画像をマウスオーバー時に変化させよう（CSS使用）
- [11-5] 画像にリンクを貼ろう
- [11-4] 別のページの特定の箇所にリンクしよう
- [11-3] 同じページ内でリンクしよう
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
