HTML 背景画像
背景画像は、ほとんどすべてのHTML要素に指定できます。
HTML要素の背景画像
HTML要素に背景画像を追加するには、HTMLのstyle属性とCSSのbackground-imageプロパティを使います。：
<head>セクションの<style>要素で背景画像を指定することもできます：
ページの背景画像
ページ全体に背景画像を表示させたい場合は、<body>要素で背景画像を指定する必要があります：
バックグラウンドリピート
背景画像が要素よりも小さい場合、画像は要素の最後に到達するまで、水平方向および垂直方向に繰り返されます。
背景画像が繰り返されないようにするには、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背景チュートリアルを参考にしてください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。