背景色
<style type="text/css"><!--
body {background:#eee;}
p#n1 {background:#8294af; color:#fff;}
p#n2 {background:transparent; color:#555; border:2px solid #8294af;} /* 背景色を透明に設定 */
--></style>
<body>
<p id="n1">こんにちは こんにちは こんにちは こんにちは</p>
<p id="n2">こんにちは こんにちは こんにちは こんにちは</p>
</body>
body {background:#eee;}
p#n1 {background:#8294af; color:#fff;}
p#n2 {background:transparent; color:#555; border:2px solid #8294af;} /* 背景色を透明に設定 */
--></style>
<body>
<p id="n1">こんにちは こんにちは こんにちは こんにちは</p>
<p id="n2">こんにちは こんにちは こんにちは こんにちは</p>
</body>
背景画像
<style type="text/css"><!--
body {background:url(img/roll.gif);}
p#n1 {background:url(img/p1.gif) repeat-x; color:#444;}
p#n2 {background:none; color:#333; border:2px solid #eee;} /* = 背景色を透明に設定 */
--></style>
<body>
<p id="n1">こんにちは こんにちは こんにちは こんにちは</p>
<p id="n2">こんにちは こんにちは こんにちは こんにちは</p>
</body>
body {background:url(img/roll.gif);}
p#n1 {background:url(img/p1.gif) repeat-x; color:#444;}
p#n2 {background:none; color:#333; border:2px solid #eee;} /* = 背景色を透明に設定 */
--></style>
<body>
<p id="n1">こんにちは こんにちは こんにちは こんにちは</p>
<p id="n2">こんにちは こんにちは こんにちは こんにちは</p>
</body>
backgroundプロパティに以下のような画像だけを指定すると背景画像は、タイル上に敷き詰められます。
p要素の背景には以下のような画像を指定しています。
背景画像の並べ方
background:url(URI) repeat; 背景画像をタイル状に敷き詰める(初期値)
<style type="text/css"><!--
body {background:url(img/roll.gif) repeat;}
--></style>
<body>
</body>
body {background:url(img/roll.gif) repeat;}
--></style>
<body>
</body>
background:url(URI) repeat-x; 背景画像を横方向に並べる
<style type="text/css"><!--
body {background:url(img/roll.gif) repeat-x;}
--></style>
<body>
</body>
body {background:url(img/roll.gif) repeat-x;}
--></style>
<body>
</body>
background:url(URI) repeat-y; 背景画像を縦方向に並べる
<style type="text/css"><!--
body {background:url(img/roll.gif) repeat-y;}
--></style>
<body>
</body>
body {background:url(img/roll.gif) repeat-y;}
--></style>
<body>
</body>
background:url(URI) no-repeat; 背景画像を繰り返さずひとつだけ表示
<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat;}
--></style>
<body>
</body>
body {background:url(img/roll.gif) no-repeat;}
--></style>
<body>
</body>
背景には以下のような画像を指定しています。
背景画像の固定配置
background:url(URI) fixed; 背景画像を固定表示
<style type="text/css"><!--
body {background:url(img/tp2.gif) fixed;}
--></style>
<body>
</body>
body {background:url(img/tp2.gif) fixed;}
--></style>
<body>
</body>
background:url(URI) scroll; 背景画像をスクロール表示(初期値)
<style type="text/css"><!--
body {background:url(img/tp2.gif) scroll;}
--></style>
<body>
</body>
body {background:url(img/tp2.gif) scroll;}
--></style>
<body>
</body>
背景には以下のような画像を指定しています。
背景画像の表示位置
<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat center;} /* [center]=[center center]=[50% 50%] */
--></style>
<body>
</body>
body {background:url(img/roll.gif) no-repeat center;} /* [center]=[center center]=[50% 50%] */
--></style>
<body>
</body>
ie8- -ff3 -o9 -sf4 -gc2では、[center]は仕様に反し[top center]として表示されます。
背景には以下のような画像を指定しています。
背景には以下のような画像を指定しています。
