【CSS】「background」背景設定＜1＞

ホームページの背景関連のスタイルを一括で指定するプロパティです。色名、カラーコード、あるいは transparent(透明 /初期値)値で要素の背景色を設定します。

構文

background-color: 値;

.sample {
    background-color: blue;
    color: white;
}
.sample1 {
    background-color: #252afd;
    color: #ffffff;
}
.sample2 {
    background-color: rgb(143,112,103);
    color: rgb(255,255,255);
　/*color:文字色*/
}

サンプルの結果はこちらClick!

背景画像を指定する際に使います。背景画像はURLで指定します。

構文

background-image: url(".gif/.jpg/.png画像ファイル名")

<html>
<head>
<style>
body {
    background-image: url("background_sample1.gif");
}
</style>
</head>
<body>
 
<h1>背景画像のサンプルです。</h1>
 
</body>
</html>

サンプルの結果はこちらClick!

↑一枚の画像を垂直水平方向に繰り返して表示してます。

background-repeat:no-repeat;

<html>
<head>
<style>
body {
    background-image: url("background_sample1.gif");
    background-repeat:no-repeat;
}
</style>
</head>
 <body>
 
<h1>背景画像のサンプルです。</h1>
 
 </body>
</html>

サンプルの結果はこちらClick!

↑一枚の画像を繰り返さずに１度だけ表示します。

上記CSSコードは下記のように簡単に書き換えられます。

|
background:url("background_sample1.gif") no-repeat;
|

background属性

background-repeat	repeat：繰り返し表示(初期値) no-repeat：背景画像を１つだけ表示する。 repeat-x：背景画像を水平方向に並べる repeat-y：背景画像を垂直方向に並べる。 space：余白を各背景画像の間に等分し並べる。 round：表示領域に最大数のイメージを繰り返し表示するようにサイズを調整する
background-position	center：中央に表示します。 left：左側に表示します。 bottom：下部に表示します。 percentage(%)：表示位置を割合で指定します。

background-repeat

*repeat：繰り返し表示(初期値)

*no-repeat：背景画像を１つだけ表示する。

*repeat-x：背景画像を水平方向に並べる

*repeat-y：背景画像を垂直方向に並べる。

*space：余白を各背景画像の間に等分し並べる。

*round：表示領域に最大数のイメージを繰り返し表示するようにサイズを調整する

background-position

*center：中央に表示します。

*left：左側に表示します。

*bottom：下部に表示します。

*percentage(%)：表示位置を割合で指定します。

Prev12 Next