【HTML入門】background属性は非推奨？CSSを使って背景を指定する方法とは？
Webページに背景画像を指定したいときがありますよね。
コーディングで、HTMLのbackground属性を使ったことがある方もいるのではないでしょうか。
実は、background属性は現在のHTMLでは非推奨とされています。
今回は、その理由と代わりにCSSで指定する方法を紹介していきます。
ぜひ最後まで読んでくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
background属性はもう使えない？
background属性は、背景画像が指定できる属性です。
body要素に指定することで、ページ全体を覆う背景画像を表示させることができます。
<body background="sample.png">
<!-- ページの中身 -->
</body>この属性は、現在のHTML5では廃止されています。
ブラウザで表示されるため問題ないように思えますが、HTMLが新しくなった際に期待通りの表示にならなくなる可能性があります。
background属性に限らず、廃止されたものを使用し続けることは避けた方が良いですね。
CSSを使った背景の指定方法
それでは、現在のHTMLでは、background属性を使わずにどのように背景の指定を行うべきなのでしょうか？
HTML5以降、見栄えの指定はCSSで行うことが推奨されています。
CSSには、背景を指定するbackgroundプロパティが用意されています。
こちらを使う方法を解説していきましょう。
CSSのbackgroundプロパティについて
backgroundプロパティは、背景の画像だけでなく、色や位置、大きさなど、背景に関するスタイルを一括で指定できます。
background属性とは違い、こちらは、body要素だけでなくすべてのブロックレベル要素に指定が可能です。
/* すべてのブロックレベル要素に指定できる */
div {
background: url("bg.png") center no-repeat;
}上記は「画像の指定」と「中央寄せ」「リピートなし」を指定しています。
backgroundプロパティで指定できるものは、以下のプロパティです。
- background-attachment：背景の固定・移動を指定
- background-clip：背景の描画領域を指定
- background-color：背景色を指定
- background-image：背景画像を指定
- ackground-origin：背景画像の配置の基点を指定
- background-repeat：背景画像のリピート方法を指定
- background-size：背景画像のサイズを指定
「background-size」の指定は「background-position」の直後に「/」をつけて記述する必要があります。
div {
background: url("233952.png") center/60%;
}また、複数の背景画像があるときには、カンマで区切って指定します。
指定した順に下に重なっていき、最後の背景にのみ、背景色が指定できます。
div {
background: url("bg01.png"), url("bg02.png"), ..., skyblue;
}配置位置やリピートの指定などは、それぞれの背景画像に指定することができます。
実際に重ね合わせて調節してみてくださいね。
まとめ：背景指定にはCSSのbackgroundプロパティを使おう
今回は、HTMLのbackground属性の代わりになるbackgroundプロパティについて、解説してきました。
HTML5では、見栄えに関する指定はCSSで行うことを推奨しているという話もしましたね。
backgroundプロパティは、ブロックレベル要素であればどこでも使えるので、ぜひ試してみてくださいね。
今回の記事が参考になれば幸いです。
