背景画像を設定する

2015年6月20日

background-imageプロパティを使うことで、CSSで背景画像を
設定することができます。値には、背景に使用する画像の
保存場所を示すパスを設定します。

    #container{
        background-color: greenyellow;
    }
    *{margin:0;padding:0;}

    .shironeko{
        width:100px;
        height:100px;
        background-image: url(neko.jpg);
    }
    .kuroneko{
        width:100px;
        height:100px;
        background-image: url(img/kuroneko.jpg);
    }
    .bg_repeat{
        background-repeat:repeat-x;
    }

#container{

background-color: greenyellow;

}

*{margin:0;padding:0;}

.shironeko{

width:100px;

height:100px;

background-image: url(neko.jpg);

}

.kuroneko{

width:100px;

height:100px;

background-image: url(img/kuroneko.jpg);

}

.bg_repeat{

background-repeat:repeat-x;

}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>

<div id="container">
    
    <div class="shironeko"></div>
    <div class="kuroneko"></div>

    <div class="shironeko bg_repeat"></div>    
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

</div>

</body>

</html>

背景画像を繰り返して表示する。

背景画像を繰り返して表示させたい場合、
background-repeatプロパティを使用します。
値
repeat　縦横方向に画像を繰り返して表示。デフォルト値
repeat-x　横方向に画像を繰り返して表示
repeat-y　縦方向に画像を繰り返して表示
no-repeat　繰り返し表示しない

複数のクラスを適用したいとき

HTMLのサンプルコードの15行名を見て頂くと
これまでに書いてきたクラスの指定方法とは違う方法で
書かれています。
*class="shironeko bg_repeat" とサンプルコードでは書いています。

クラス名　＋　半角スペース　＋　クラス名とすることで複数の
クラスをHTMLタグに指定することができます。もちろん３つ以上も
指定することができます。