【CSS】背景画像の設定
CSSで背景画像を設定するには「background: url(#);」を使います。
背景画像を全面に敷き詰める。
背景画像を全面に敷き詰めるには、「background: url(#);」をそのまま使います。
ソース
body{ background:url(img/01.gif); }
背景画像を横や縦に並べる
背景画像を横に並べるには「repeat-x」、縦に並べるには「repeat-y」を「background: url(#);」の値に追記します。
横の場合
body{ background: url(img/02.jpg) repeat-x; }
縦の場合
body{ background: url(img/03.jpg) repeat-y; }
縦並び背景画像の応用
グラデーションがある背景画像を使って、本文を浮かび上がらせて見えるようにします。
ソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>背景画像4</title> <style> body{ background: url(img/04.jpg) repeat-y; font-family:"Hiragino Kaku Gothic ProN", Meiryo, Sans-serif; } p{ padding-left: 80px; } h1{ color: #9C0D00; border-bottom: 4px dashed #999; margin-left: 60px; padding-left: 20px; } </style> </head> <body> <h1>Page Design</h1> <p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br> また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br> このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p> </body> </html>
背景画像を並べないようにする。(固定する)
背景画像を並べないようにするには「no-repeat」を「background: url(#);」の値に追記します。背景画像の場所には「top」「right」「bottom」「left」または数値で指定します。何も設定しなければ「left top」が割り当てられます。
ソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>背景画像5</title> <style> body{ background: url(img/05.gif) no-repeat left top; font-family:"Hiragino Kaku Gothic ProN", Meiryo, Sans-serif; } h1, p{ margin-left: 160px; } h1{ font-family:"ヒラギノ明朝 ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif; font-weight: bold; letter-spacing:-1px; } </style> </head> <body> <h1>古池や蛙飛び込む水の音</h1> <p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br> 明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、 「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。<br> 明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。<br> 発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。</p> </body> </html>