背景画像を任意の方向に繰り返し表示する
プロパティ:background-repeat:値:repeat-x(横方向に繰り返し) repeat-y(縦方向に繰り返し)
スタイルシートで背景画像を任意の方向に繰り返し表示するには、background-repeatプロパティを使います。
位置を指定したいときは前に出てきたbackground-positionプロパティが使えます。
位置を指定しない場合、横方向はページ上、縦方向はページ左に表示されます。
ソース例 横方向に繰り返す
<html>
<head>
<title>背景画像を横方向に繰り返し表示する</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body style="background-image:url(cat.gif); background-repeat:repeat-x">
<h1>背景画像が横方向に繰り返し表示されています。</h1>
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>
表示はこちら
ソース例 縦方向に繰り返す
<html>
<head>
<title>背景画像を縦方向に繰り返し表示する</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body style="background-image:url(cat.gif); background-repeat:repeat-y">
<h1>背景画像が縦方向に繰り返し表示されています。</h1>
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>
表示はこちら
2006年05月06日