Now is better than never

読者です 読者をやめる 読者になる 読者になる

無糖の日々

The just desserts is also desserts.

CSS基礎編-4 画像繰り返し

目標:背景画像を使って繰り返し表示させる!

今回使うもの: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>

 

Ⅲ結果

f:id:Detsch:20160902220019p:plain

今回はy軸でやろうと思ってたのですが、予想以上に元画像が大きかったので元画像を小さくして範囲指定したのですがこっちのほうが良かったのであえてこっちのままです。(通常y指定だと左側数センチ範囲で画像が繰り返される仕様です)

※ビール画像を入れようと思ったがまたそれは後程…(ΦωΦ)

<