背景画像の指定

背景に表示する画像をCSSで設定する方法を紹介します。

背景画像の指定法を学び、サイトの見栄えをよくしましょう。

背景色とボーダーの設定

はじめに画像でなくて、色とボーダを設定する方法を紹介します。

以下のようにHTML、CSSファイルをつくります。

【index.html】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="no1">
	<h1>タイトル</h1>
	<p>文章</p>
</div>
</body>
</html>

【style.css】

.no1{
	background-color:#ff0000;
	border:solid #0000ff;
	color:#ffffff;
}

背景色はbackground-color、境界色はborder、文字色はcolorで設定しています。すると

背景色と境界線

となります。境界と文字との間にスペースを入れたい場合は、タイトルと文章をdivで囲んで、paddingでスペースをいれるといいでしょう。

【index.html】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="no1">
	<div class="no2">
		<h1>タイトル</h1>
		<p>文章</p>
    </div>
</div>
</body>
</html>

【style.css】

.no1{
	background-color:#ff0000;
	border:solid #0000ff;
	color:#ffffff;
}
.no2{
	padding: 0 10px;
}

paddingで左右に10pxのスペースをいれました。以下のように表示されます。

スペースをいれた

背景に画像を表示する

では背景画像の設定へ移ります。以下の背景画像

backimg

を使用します。縦横10pxの画像です。

では、以下のようにCSSを変更します。文字の色は黒(#333)としています。

.no1{
	background-image: url("backimg.png");
	color:#333;
}
.no2{
	padding: 0 10px;
}

すると以下のように表示されます。

背景画像設定

確かに背景画像が赤丸になりました。

背景画像のリピート設定

背景画像をリピートさせないようにすることもできます。例えば

.no1{
	background-image: url("backimg.png");
	background-repeat:no-repeat;
	color:#333;
}
.no2{
	padding: 0 10px;
}

とすれば、

リピートなし

となります。横方向だけリピートさせるなら

.no1{
	background-image: url("backimg.png");
	background-repeat:repeat-x;
	color:#333;
}
.no2{
	padding: 0 10px;
}

横リピート

とします。縦方向だけなら

.no1{
	background-image: url("backimg.png");
	background-repeat:repeat-y;
	color:#333;
}
.no2{
	padding: 0 10px;
}

縦方向だけリピート

となります。ちなみに、縦横で繰り返す場合は

background-repeat: repeat;

とします。デフォルトではこの設定になっています。

背景画像の表示位置を設定する

背景画像の表示位置は

background-position: X Y;

により設定できます。X,Yにはそれぞれx座標とy座標を設定します。画面左上が原点で右方向がx座標における正、下方向がy座標における正となっています。CSSを

.no1{
	background-image: url("backimg.png");
	background-repeat:no-repeat;
	background-position:20px 40px;
	color:#333;
}
.no2{
	padding: 0 10px;
}

とすれば

位置を設定

となります。要素の一番左下に指定することもでき

.no1{
	background-image: url("backimg.png");
	background-repeat:repeat-x;
	background-position:left bottom;
	color:#333;
}
.no2{
	padding: 0 10px;
}

下に表示

のようにします。

  1. left:左
  2. right:右
  3. top:上
  4. bottom:下
  5. center:中心

で位置を設定できます。また、%での指定も可能なのでいろいろ試してみてください。

一度に背景を設定する

上記の設定を一度に設定することができます。そうするには

background: 色 画像URL リピート 位置;

を使います。 例えば

.no1{
	background: #ff0000 url("backimg.png") repeat-x left bottom;
	color:#ffffff;
}
.no2{
	padding: 0 10px;
}

のようにします。すると

同時に背景を設定する

となります。下の切れ目が気になるので、no2の下にpaddingを追加して

.no1{
	background: #ff0000 url("backimg.png") repeat-x left bottom;
	color:#ffffff;
}
.no2{
	padding: 0 10px 10px 10px;
}

とすれば(上から時計周りなので、上0px、右10px、下10px、左10pxの空白を設定しています)

下を空けた結果

となります。

著者:安井 真人(やすい まさと)