背景

目次

Ⅰ．背景色を指定する

background-color: 色

サンプル
ソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE type="text/css">
<!--
 BODY  { background-color: #ffffaa;  }
 H1    { background-color: #0000ff; text-align="center"; color: #ffffff}
 P     { background-color: #ff00ff }
 TABLE { background-color: #00ffff }
-->
</STYLE>
</HEAD>

<BODY>
<H1>背景色の指定</H1>
<P>
スタイルシートを利用して、背景色を指定する
</P>
<table border="1">
<tr><th>名前</th><th>性別</th></tr>
<tr><td>座間味　康吉</td><td>男</td></tr>
</TABLE>
</BODY>
</HTML>

Ⅱ．背景画像を指定する

background-image: url("url")

サンプルソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE type="text/css">
<!--
 BODY       { background-image: url("bg27i.gif") }
 H1,P,TABLE { background-image: url("b3.gif") }
-->
</STYLE>
</HEAD>

<BODY>
<H1 align="center">背景画像の指定</H1>
<P>
スタイルシートを利用して、背景画像を指定する
</P>
<table border="1">
<tr><th>名前</th><th>性別</th></tr>
<tr><td>座間味　康吉</td><td>男</td></tr>
</table>
</BODY>
</HTML>

Ⅲ．背景画像の並びを指定する

background-repeat: 並び方

［並び方］
repeat縦横にタイル状に繰り返して表示
repeat-x左上から横方向にのみ繰り返して表示
repeat-y左上から縦方向にのみ繰り返して表示
no-repeat繰り返さずに１つだけ表示

サンプルーⅠソース例ーⅠ
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE type="text/css">
<!--
 BODY       { background-color: #ffffff;
              background-image: url("bg27i.gif");
              background-repeat: repeat;
 }
-->
</STYLE>
</HEAD>
<BODY>
<H3 align="center">縦横にタイル状に繰り返して表示</H3>
</BODY>
</HTML>

サンプルーⅡソース例ーⅡ
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE type="text/css">
<!--
 BODY       { background-color: #ffffff;
              background-image: url("bg27i.gif");
              background-repeat: repeat-x;
 }
-->
</STYLE>
</HEAD>
<BODY>
<H3 align="center">左上から横方向にのみ繰り返して表示</H3>
</BODY>
</HTML>

サンプルーⅢソース例ーⅢ
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE type="text/css">
<!--
 BODY       { background-color: #ffffff;
              background-image: url("bg27i.gif");
              background-repeat: repeat-y;
 }
-->
</STYLE>
</HEAD>
<BODY>
<H3 align="center">左上から縦方向にのみ繰り返して表示</H3>
</BODY>
</HTML>

サンプルーⅣソース例ーⅣ
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE type="text/css">
<!--
 BODY       { background-color: #ffffff;
              background-image: url("bg27i.gif");
              background-repeat: no-repeat;
 }
-->
</STYLE>
</HEAD>
<BODY>
<H3 align="center">繰り返さず１つだけ表示</H3>
</BODY>
</HTML>

Ⅳ．背景画像の表示位置を指定する

background-position: 表示位置

［表示位置］
横位置　縦位置単位付きの数値または％
横位置　縦位置left,right,center,top,bottom

サンプルソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE type="text/css">
<!--
 BODY { background-color: #ffffff;
        background-image: url("G3.gif");
        background-repeat: no-repeat;
        background-position: center center;
 }
-->
</STYLE>
</HEAD>
<BODY>
<h2 align="center">中央に表示</h2>
</BODY>
</HTML>

Ⅴ．背景画像を固定する

background-attachment: 固定するか？

［固定するか？］
fixed背景画像の位置を固定する
scroii背景画像を他の内容と共にスクロールさせる

サンプルソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE type="text/css">
<!--
 BODY { background-color: #ffffff;
        background-image: url("G3.gif");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position:   center center;
 }
-->
</STYLE>
</HEAD>
<BODY>
<h2 align="center">中央に表示</h2>
</BODY>
</HTML>

［メインに戻る］