CSS-背景
この章では、さまざまなHTML要素の背景を設定する方法について説明します。要素の次の背景プロパティを設定できます-
ザ・ background-color プロパティは、要素の背景色を設定するために使用されます。
ザ・ background-image プロパティは、要素の背景画像を設定するために使用されます。
ザ・ background-repeat プロパティは、背景の画像の繰り返しを制御するために使用されます。
ザ・ background-position プロパティは、背景の画像の位置を制御するために使用されます。
ザ・ background-attachment プロパティは、背景の画像のスクロールを制御するために使用されます。
ザ・ background プロパティは、他の多くの背景プロパティを指定するための省略形として使用されます。
背景色を設定する
以下は、要素の背景色を設定する方法を示す例です。
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>これにより、次の結果が生成されます-
背景画像を設定する
以下に示すように、ローカルに保存されている画像を呼び出すことで、背景画像を設定できます。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>次の結果が得られます-
背景画像を繰り返す
次の例は、画像が小さい場合に背景画像を繰り返す方法を示しています。画像を繰り返したくない場合は、background-repeatプロパティにno-repeat値を使用できます。この場合、画像は1回だけ表示されます。
デフォルトでは、background-repeatプロパティには繰り返し値があります。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>次の結果が得られます-
次の例は、背景画像を垂直方向に繰り返す方法を示しています。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>次の結果が得られます-
次の例は、背景画像を水平方向に繰り返す方法を示しています。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>次の結果が得られます-
背景画像の位置を設定する
次の例は、背景画像の位置を左側から100ピクセル離して設定する方法を示しています。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>次の結果が得られます-
次の例は、背景画像の位置を左側から100ピクセル、上部から200ピクセル下に設定する方法を示しています。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>次の結果が得られます-
背景の添付ファイルを設定する
背景の添付ファイルは、背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを決定します。
次の例は、固定背景画像を設定する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>次の結果が得られます-
次の例は、スクロールする背景画像を設定する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>次の結果が得られます-
略記プロパティ
backgroundプロパティを使用して、すべてのbackgroundプロパティを一度に設定できます。例-
<p style = "background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>