Css-backgrounds
提供：Dev Guides
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_プロパティには_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_プロパティを使用して、すべての背景プロパティを一度に設定できます。 たとえば-
<p style = "background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>