【CSS】背景画像の設定 - PCゲーマーのWebデザイン備忘録

CSSで背景画像を設定するには「background: url(#);」を使います。

背景画像を全面に敷き詰める。

f:id:game-web-design:20140919183145p:plain

背景画像を全面に敷き詰めるには、「background: url(#);」をそのまま使います。

ソース

body{
  background:url(img/01.gif);
}

背景画像を横や縦に並べる

背景画像を横に並べるには「repeat-x」、縦に並べるには「repeat-y」を「background: url(#);」の値に追記します。

横の場合

f:id:game-web-design:20140919183954p:plain

body{
  background: url(img/02.jpg) repeat-x;
}

縦の場合

f:id:game-web-design:20140919185546p:plain

body{
  background: url(img/03.jpg) repeat-y;
}

縦並び背景画像の応用

f:id:game-web-design:20140919184711p:plain

グラデーションがある背景画像を使って、本文を浮かび上がらせて見えるようにします。

ソース

<!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>

背景画像を並べないようにする。（固定する）

f:id:game-web-design:20140919184853p:plain

背景画像を並べないようにするには「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>