目標：背景画像を使って繰り返し表示させる！
今回使うもの：background-repeat
では早速！
ⅠCSS記述
@charset"UTF-8";
body{
background-image:url("217-01.JPG"); ←("")内は画像名です
background-repeat:repeat-y; ←yはy軸方向への繰り返しです。xならx軸
}
div{
margin-top:40px; ←「CSS-basic」の位置指定
margin-left:150px;
width:500px;
}
h1{
padding-left:3px;
color:#009da5;
font-family:"italic",serif;
font-style:italic;
}
a{
padding:0px 10px 10px 10px; ←黒文字の位置指定
line-height:150%;
color:#black;
font-family:"MSゴシック",sans-serif;
font-size:xx-large;
}
ⅡHTML記述
<body>
<div>
<h1>CSS-basic</h1>
<a>夏の暑さも吹き飛ぶゆずビール。</a>
<link rel="stylesheet"href="9css-basic.css"type="text/css">
</div>
</body>
Ⅲ結果
今回はy軸でやろうと思ってたのですが、予想以上に元画像が大きかったので元画像を小さくして範囲指定したのですがこっちのほうが良かったのであえてこっちのままです。(通常y指定だと左側数センチ範囲で画像が繰り返される仕様です)
※ビール画像を入れようと思ったがまたそれは後程…(ΦωΦ)
