【HTML入門】background属性は非推奨?CSSを使って背景を指定する方法とは?

2024.01.03
background属性は非推奨?CSSを使って背景を指定する方法とは?

Webページに背景画像を指定したいときがありますよね。

コーディングで、HTMLのbackground属性を使ったことがある方もいるのではないでしょうか。

実は、background属性は現在のHTMLでは非推奨とされています。

今回は、その理由と代わりにCSSで指定する方法を紹介していきます。

ぜひ最後まで読んでくださいね!

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プロパティは、ブロックレベル要素であればどこでも使えるので、ぜひ試してみてくださいね。

今回の記事が参考になれば幸いです。

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5