Embedded Files
背景色/画像(background-color/image)と画像の並べ方(background-repeat)
背景色/画像(background-color/image)と画像の並べ方(background-repeat)
背景には色をつけれます。 色だけじゃなく、画像も背景にできるよ。
背景にした画像は単体でも、繰り返しにして並べることもできます。
デスクトップの背景と同じだね！
背景(background)の色/画像
スタイル名：値
背景色
background-color: #ffff99
値：#ff0000やRedなどの色を表す値
transparentを指定すると、背景を透明に
背景画像
background-image: url(file名.gif)
値：01.gifや02.jpg などの画像ファイル
例
ｾﾚｸﾀ {
background-image: #00ff00;
}
ｾﾚｸﾀ {
background-image: url(img01.gif);
}
適用できる要素
全体の背景色
表の背景色/セルの背景色
見出し(h)の背景色
段落(p)の背景色
など
全体の背景画像
表の背景画像/セルの背景画像
見出し(h)の背景画像
段落(p)の背景画像
など
ブラウザ表示
見出し p
見出し p
段落 h
表
表
表
表
背景
背景色の例→
背景画像(background-image)の並び方
background-repeat: repeat-y
値：no-repeat, repeat-x, repeat-y, repeat
no-repeat：画像を繰り返さずに表示
repeat-x：画像を横方向にのみ繰り返し表示
repeat-y：画像を縦方向にのみ繰り返し表示
repeat：画像を縦横に繰り返して表示
例
ｾﾚｸﾀ
{
background-image: url(img01.gif);
background-repeat: repeat-y
}
背景画像を指定した場合、合わせて
画像の並べ方も指定します。
リピートに関する解説は下段を参照
してね。
パターン1
ソースはこんな感じ↓
<body style="background-image:url(bkG1.png);
background-repeat:repeat-x">
<h1 style="background-image:url(bkG2.jpg);
background-repeat:repeat-y;
color:white">見本です</h1>
</body>
ソースのrepeat部分をいろいろ変えて
試してみてね。
パターン2
上の2つの画像を使って、リピートを
試してみたよ→
画像は写真とは限りません。
背景色の指定では表現できないグラデーションをバックにするときなどは、
画像としてグラデーションの1部分を切り出してimageで読み込み、
repeatで並べて背景色のようにするよ。
1部分を切り出す理由は。。。
例えばページ全体の背景をグラデの色にしたとき、1ページの大きさ（1200×1200pxほど）
丸ごとの画像にすると重すぎて読み込みに時間がかかり、閲覧者のストレスになってしまう。
小さい軽い画像にして、repeatで繰り返して読み込む方が早いからストレスフリー♪♪
勿論、切り出すときにはグラデーションのパターンを壊さないように。
Page updated
Google Sites
Report abuse