CSSでの背景 #

CSSでの背景の設定方法についてを述べる。

background-colorプロパティ #

background-colorプロパティは背景色を設定するプロパティである。

iframeを使い、使用例を示す。

<iframe width="200" height="150" style="background-color:red">
</iframe>

表示例

background-imageプロパティ #

background-imageプロパティは、背景に画像を表示させるプロパティである。

値には、**url(画像のパス)**の形で画像を指定し入力する。

CSSで利用するには、body要素に適用させる。

使用例として、下記のhtmlをiframeに組み込んで表示させてみる。

<!DOCTYPE HTML>
<html>
<head>
<title>background-imageサンプル</title>

<style type="text/css">
    body {
        background-image: url(img_small.jpg);
    }

    h1 {
        color:greenyellow
    }
</style>

</head>
<body>

<h1>background-imageのサンプル</h1>

</body>
</html>

iframe使用例

<iframe width="500" height="400" src="/css_sample_pages/background-image.html">
</iframe>

表示例

background-clipプロパティ #

background-clipプロパティは、背景画像をボックスのどの領域に表示させるかを設定するプロパティである。

設定できる値は以下の通り。

border-box	・・	ボーダー以内の領域に表示させる
padding-box	・・	パディング以内の領域に表示させる
content-box	・・	要素内容を表示させる領域に表示させる

使用例

<!DOCTYPE HTML>
<html>
<head>
<title>background-clipサンプル</title>

<style type="text/css">
    p {
        width:300px; height:200px; padding:10px;
        border:dashed 3px black; 
        color:white;
        background-image:url(img_small.jpg);
        background-clip:content-box;
    }
</style>

</head>
<body>

<p>background-clipのサンプル</p>

</body>
</html>

iframe使用例

<iframe width="400" height="300" src="/css_sample_pages/background-clip.html">
</iframe>

表示例

background-repeatプロパティ #

background-repeatプロパティは、背景画像を繰り返して表示させるか、及びその表示のさせ方を設定するプロパティである。

設定する値は以下の通り。デフォルトではrepeatである。

repeat-x	・・	横方向に画像を連続して表示させる
repeat-y	・・	縦方向に画像を連続して表示させる
repeat	・・	画像を全体に連続して表示させる
no-repeat	・・	画像を１つだけ表示させる

使用例

<!DOCTYPE HTML>
<html>
<head>
<title>background-repeatサンプル</title>

<style type="text/css">
    body {
        background-image: url(img_small.jpg);
        background-repeat: repeat-x;
    }

    h1 {
        color:greenyellow
    }
</style>

</head>
<body>

<h1>background-repeatのサンプル</h1>

</body>
</html>

iframe使用例

<iframe width="500" height="400" src="/css_sample_pages/background-repeat.html">
</iframe>

表示例

background-sizeプロパティ #

background-sizeプロパティは、背景画像を表示するサイズを設定するプロパティである。

値は以下のキーワードか、幅・高さを示す数値２つを指定する。（数値を１つ指定した場合は幅として認識される。）デフォルトはautoである。

contain	・・	画像の縦横比を保った状態で、画像全体が表示される最大サイズにする
cover	・・	画像の縦横比を保った状態で、画像全体が表示される最小サイズにする
auto	・・	画像の縦横比を保った状態
(数値)%	・・	背景の表示領域に対するパーセンテージ分のサイズにする

使用例

<!DOCTYPE HTML>
<html>
<head>
<title>background-sizeサンプル</title>

<style type="text/css">
    body {
        background-image: url(img_small.jpg);
        background-size: cover;
    }

    h1 {
        color:greenyellow
    }
</style>

</head>
<body>

<h1>background-sizeのサンプル</h1>

</body>
</html>

iframe使用例

<iframe width="500" height="400" src="/css_sample_pages/background-size.html">
</iframe>

表示例

background-originプロパティ #

background-originプロパティは、ボックスにおいて画像を表示させる基準となる位置を設定する要素である。

設定する値は以下の通り。

border-box	・・	ボーダー領域の左上を基準とする
padding-box	・・	パディング領域の左上を基準とする
content-box	・・	要素内容を表示させる領域の左上を基準とする

使用例

<!DOCTYPE HTML>
<html>
<head>
<title>background-originサンプル</title>

<style type="text/css">
    p {
        width:300px; height:200px; padding:10px;
        border:dashed 3px black; 
        color:white;
        background-image:url(img_small.jpg);
        background-origin:content-box;
    }
</style>

</head>
<body>

<p>background-originのサンプル</p>

</body>
</html>

iframe使用例

<iframe width="400" height="300" src="/css_sample_pages/background-origin.html">
</iframe>

表示例

background-positionプロパティ #

background-positionプロパティは、背景に画像を表示させる位置を設定するプロパティである。画像が繰り返し表示される場合には、まずその位置に画像が表示され、そこから繰り返し表示される。

設定する値は縦方向と横方向の２つで、以下の通り。

top	・・	一番上(縦方向の0%)
bottom	・・	一番下(縦方向の100%)
left	・・	一番左(横方向の0%)
right	・・	一番右(横方向の100%)
center	・・	中央(縦・横方向の50%)
(パーセンテージ)	・・	それぞれの方向に対するパーセンテージ。数値の後に%をつける

使用例

<!DOCTYPE HTML>
<html>
<head>
<title>background-positionサンプル</title>

<style type="text/css">
    body {
        background-image: url(img_small.jpg);
        background-repeat: no-repeat;
        background-position: 100% 100%;
    }

    h1 {
        color:black
    }
</style>

</head>
<body>

<h1>↑0%↑</h1>
<h1>background-positionのサンプル</h1>
<br>
<br>
<br>
<br>
<h1>background-positionのサンプル</h1>
<h1>↓100%↓</h1>
</body>
</html>

iframe使用例

<iframe width="500" height="400" src="/css_sample_pages/background-position.html">
</iframe>

表示例

background-attachment プロパティ #

background-attachmentプロパティは、ページをスクロールしたときに背景画像も一緒にスクロールさせるか否かを設定する。

設定する値は以下の通り。

scroll	・・	背景画像も一緒にスクロールする
fixed	・・	スクロールしても背景画像を動かさない

使用例

<!DOCTYPE HTML>
<html>
<head>
<title>background-attachmentサンプル</title>

<style type="text/css">
    body {
        background-image: url(img_small.jpg);
        background-attachment: fixed;
    }

    h1 {
        color:greenyellow
    }
</style>

</head>
<body>

<h1>background-attachmentのサンプル</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
</body>
</html>

iframe使用例

<iframe width="500" height="200" src="/css_sample_pages/background-attachment.html" scrolling="yes">
</iframe>

表示例

backgroundプロパティ #

backgroundプロパティは、これまでに出てきた背景関連のプロパティの値をまとめて指定できるプロパティである。

一部例外はあるが、値をスペースで区切れば複数指定できる。

使用例

<!DOCTYPE HTML>
<html>
<head>
<title>backgroundサンプル</title>

<style type="text/css">
    body {
        background: gray url(img_small.jpg) no-repeat fixed 100% 100%;
    }

    h1 {
        color:greenyellow
    }
</style>

</head>
<body>

<h1>↑0%↑</h1>
<h1>backgroundのサンプル</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>backgroundのサンプル</h1>
<h1>↓100%↓</h1>
</body>
</html>

iframe使用例

<iframe width="500" height="400" src="/css_sample_pages/background.html">
</iframe>

表示例