[13-2] サイトの背景に画像を表示しよう(CSS使用)

最終更新日:2017年09月24日  (初回投稿日: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軸方向)にリピートさせてみましょう。
サンプルはこちら。

(画像クリックで、実際のファイルが 別ウィンドウで開きます)

この画像を縦(y方向)にリピート↓(実サイズは 1100 × 140px)
Y方向にリピートする画像

CSSで「repeat-y」と書きます。

background:url(../img/bg3.gif) repeat-y right #fee;

このサンプルでは、画像を右端によせてリピートしたいので、位置は「right」と書いています。(値が1つなので、2つ目は自動的に「center」になります)

左上からリピートさせたければ、位置は書かなくてOK。デフォルトが左上からなので。

「背景色(#fee)」も指定していますが、これは左側が背景画像なしになるから。画像の左端の色を背景色に指定しています。

横方向のリピートは「repeat-x」

横方向(x軸方向)にリピートさせてみましょう。
サンプルはこちら。

(画像クリックで、実際のファイルが 別ウィンドウで開きます)

配置する画像はこれ↓(20px×600px)これを横方向(x軸方向)にリピートします。
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なら可能です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.