ホームページ制作/SOHO/福岡
Eメール　tk-1980@mx4.et.tiki.ne.jp
メニュー
トップページ
HTMLの基本
HTMLとは
書き方の基本
ファイル名について
よく使うタグ
テーブルでレイアウト
基本
特殊なテーブル
ホームページ作成
スタイルシート
スタイルシートとは
背景
小技集
スタイルシート
■　背景

background-repeat: repeat-y　縦方向に繰り返して表示する。

　body { background-image: url("gazou/no-1.gif")}
に
　background-repeat: repeat-yを追加します。
　追加するときは、前の要素に;（セミコロン）をつけます。
ここではurl("gazou/no-1.gif")に最後にセミコロンをつけます。半角スペースを空けてbackground-repeat: repeat-yを書き込みます。

<html>
<head>
<title></title>
<style type="text/css"><!--
body { background-image: url("gazou/no-1.gif"); background-repeat: repeat-y }
--></style>
</head>
<body bgcolor="#ffffff">
</body>
</html>

クリック


background-repeat: repeat-x　横方向に繰り返して表示する。

記入の仕方はbackground-repeat: repeat-yと同じです。

<html>
<head>
<title></title>
<style type="text/css"><!--
body { background-image: url("gazou/no-1.gif"); background-repeat: repeat-x }
--></style>
</head>
<body bgcolor="#ffffff">
</body>
</html>

クリック


background-repeat: no-repeat　繰り返しなし。一回だけ表示する。

記入の仕方はbackground-repeat: repeat-yと同じです。

<html>
<head>
<title></title>
<style type="text/css"><!--
body { background-image: url("gazou/no-1.gif"); background-repeat: no-repeat }
--></style>
</head>
<body bgcolor="#ffffff">
</body>
</html>

クリック


background-position: 画像の横の位置　縦の位置 画像の表示位置を指定する。

background-repeat: no-repeatと同時に使用します。表示位置の単位はピクセルで表示。

表示位置を左から100ピクセル、上から100ピクセルの位置に表示します。

<html>
<head>
<title></title>
<style type="text/css"><!--
body { background-image: url("gazou/no-1.gif"); background-repeat: no-repeat; background-position: 100px 100px }
--></style>
</head>
<body bgcolor="#ffffff">
</body>
</html>

クリック

←戻る
△△ページトップへ△△
[HP制作] [HP講座] [日記] [サイトマップ] [掲示板]
ホームページ制作代行サービス　流文-nagarefumi-
Eメール tk-1980@mx4.et.tiki.ne.jp