HTMLの背景画像
背景画像は、ほとんどすべてのHTML要素に指定できます。
HTML要素の背景画像
HTML要素に背景画像を追加するには、HTMLstyle属性とCSSbackground-imageプロパティを使用します。
例
HTML要素に背景画像を追加します。
<div style="background-image: url('img_girl.jpg');">
次のセクションで、<style>
要素の背景画像を指定することもできます。<head>
例
<style>
要素に背景画像を指定します。
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
ページの背景画像
<body>ページ全体に背景画像を含める場合は、要素に背景画像を指定する必要があります。
例
ページ全体の背景画像を追加します。
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
背景の繰り返し
背景画像が要素よりも小さい場合、画像は要素の最後に到達するまで、水平方向と垂直方向に繰り返されます。
例
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
背景画像が繰り返されないようにするには、background-repeatプロパティをに設定しますno-repeat。
例
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
背景カバー
background-size背景画像で要素全体をカバーする場合は、プロパティを
次のように設定できます。cover.
また、要素全体が常にカバーされるようにするには、
background-attachmentプロパティを次のように設定します。fixed:
このように、背景画像はストレッチなしで要素全体をカバーします（画像は元の比率を維持します）：
例
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
背景ストレッチ
背景画像を要素全体に合わせて拡大する場合は、background-sizeプロパティを
100% 100%次のように設定できます。
ブラウザウィンドウのサイズを変更してみてください。画像が引き伸ばされますが、常に要素全体が覆われていることがわかります。
例
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
詳細CSS
上記の例から、CSSの背景プロパティを使用して背景画像のスタイルを設定できることがわかりました。
CSS背景プロパティの詳細については、 CSS背景チュートリアルをご覧ください。