HOME > 開発者向けBLOG > Webデザイン >  背景をページの左右にどこまでも伸ばす

Technology Note 開発者向けBLOG

Webデザイン

背景をページの左右にどこまでも伸ばす

こんにちは、ゼノフィ渡部です。

背景色(画像)をページの左右に伸ばす方法をご紹介いたします。

背景を横に伸ばすだけならそれほど難しくはありませんが、大抵は幅を指定して固定する要素があると思いますので、固定する要素を含んだ構成で作成します。

大きくわけて2つの要素で構成します。

  1. 背景色(画像)を指定するdiv
  2. 幅を指定し、固定するdiv

「div.content_area」では「background: #FF5D00;」で背景色を、「div.bg_contents_area」では「 background: url(bg_contents_area.png) repeat-x;」で横幅を1pxに切り出した背景画像を横に繰り返して、表示しています。「div.content」は幅を指定し、「margin: 0 auto;」で中央に表示しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

div.content_area {
  margin: 0 0 40px;
  background: #FF5D00; /* 背景色を指定 */
}
 
div.bg_contents_area {
  background: url(bg_contents_area.png) repeat-x;　/* 背景画像を横に繰り返し表示 */
}
 
div.content {
  width: 800px;
  margin: 0 auto;
  background: #C93;
}

「<div class="content_area">」では背景色を指定し、「<div class="bg_contents_area">」では背景画像を指定しています。色と画像の2パターンのソースを記述しました。

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

<!-- 背景色指定 -->
<div class="content_area">
    <div class="content">
        <p>
            背景色の濃いオレンジ色が、左右にどこまでも伸びています。
        </p>
        <p>
            濃い茶色の背景色部分は、幅を決めて中央寄せにしています。
        </p>
    </div>
</div>
<!-- /背景色指定 -->
 
<!-- 背景画像指定 -->
<div class="bg_contents_area">
    <div class="content">
        <p>
            ラインと灰色で構成されている背景画像が、左右にどこまでも伸びています。
        </p>
        <p>
            濃い茶色の背景色部分は、幅を決めて中央寄せにしています。
        </p>
    </div>
</div>
<!-- /背景画像指定 -->

背景色と背景画像の2パターンのどちらも、左右にどこまでも伸びている表示を確認できると思います。divはブロック要素なので、背景を指定しているdivに対して幅を固定しない場合、どこまでも伸びていきます。そして、「div.content」は幅を固定していますので、中のコンテンツは幅を指定している場所まで茶色の背景色が表示され、中央に表示がされています。

サンプル

CSS

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

html,
body,
div,
p {
  margin: 0;  /* 余分なマージンを消去 */
  padding: 0; /* 余分なパディングを消去 */
}
 
div.content_area {
  margin: 0 0 40px;
  background: #FF5D00; /* 背景色を指定 */
}
 
div.bg_contents_area {
  background: url(bg_contents_area.png) repeat-x;　/* 背景画像を横に繰り返し表示 */
}
 
div.content {
  width: 800px;
  margin: 0 auto;
  background: #C93;
}
 
div.content p {
  padding: 20px;
}

HTML

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

<!-- 背景色指定 -->
<div class="content_area">
    <div class="content">
        <p>
            背景色の濃いオレンジ色が、左右にどこまでも伸びています。
        </p>
        <p>
            濃い茶色の背景色部分は、幅を決めて中央寄せにしています。
        </p>
    </div>
</div>
<!-- /背景色指定 -->
 
<!-- 背景画像指定 -->
<div class="bg_contents_area">
    <div class="content">
        <p>
            ラインと灰色で構成されている背景画像が、左右にどこまでも伸びています。
        </p>
        <p>
            濃い茶色の背景色部分は、幅を決めて中央寄せにしています。
        </p>
    </div>
</div>
<!-- /背景画像指定 -->

<

>

PAGETOP