<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>
<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>
backgroundプロパティに以下のような画像だけを指定すると背景画像は、タイル上に敷き詰められます。
p要素の背景には以下のような画像を指定しています。
<style type="text/css"><!--
body {background:url(img/roll.gif) repeat;}
--></style>
<body>
</body>
<style type="text/css"><!--
body {background:url(img/roll.gif) repeat-x;}
--></style>
<body>
</body>
<style type="text/css"><!--
body {background:url(img/roll.gif) repeat-y;}
--></style>
<body>
</body>
<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat;}
--></style>
<body>
</body>
<style type="text/css"><!--
body {background:url(img/tp2.gif) fixed;}
--></style>
<body>
</body>
<style type="text/css"><!--
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>
ie8- -ff3 -o9 -sf4 -gc2では、[center]は仕様に反し[top center]として表示されます。
背景には以下のような画像を指定しています。