background / background-image CSS背景画像設定
background / background-image CSS背景画像設定
background / background-image CSS背景画像設定
スタイルプロパティまたはCSSプロパティで背景画像を設定するには、背景画像専用のbackground-imageプロパティまたは、background-imageを含む背景関連プロパティをまとめて設定することが可能な略記プロパティであるbackgroundプロパティを利用します。
CSSとHTML/XHTMLによる背景画像の各種スタイル設定と推奨される方法
W3C仕様HTML4/XHTML1やHTML5ではbody要素・タグに限らず、背景画像を設定するには以下の4つの方法がありますが、HTML4においても下記1.項のHTMLのbackground属性による設定方法は非推奨となっており、CSSによる設定もCSS1で2.項、3.項が定義されましたが、CSS2(CSS 2.0/CSS 2.1)/CSS3含む以降はスタイル設定には4.項のCSS外部ファイル設定が推奨されます。
- body要素のbackground属性を設定
(HTML3.2で定義／【W3C非推奨】) - body要素のstyle属性にCSS設定
(CSS1/HTML3.2で定義) - headタグ内でstyle要素を定義、その内側でCSS設定
(CSS1/HTML4で定義) - CSS専用ファイルに設定しHTML/XHTMLファイルに読み込んで設定
(CSS2/HTML4で定義)
1.項のbody要素background属性の設定方法は下記の通りです。
<body background="画像ファイルパス"> <!-- 【W3C非推奨】 -->
このHTMLの[background]アトリビュート(属性)は背景画像しか設定できませんが、CSSにおける背景関係のプロパティには、スペース区切りで背景画像以外にも複数まとめて設定可能な同名のbackgroundプロパティと背景画像を設定できるbackground-imageプロパティのように個々に特化した設定を行うことができるプロパティがあります(異なるプロパティ設定の区切りはセミコロン)。
以降、CSSによる設定は、HTML/XHTML共通でCSSプロパティの記述は、CSSプロパティ設定方法、URL指定方法はCSS URI/URL/URN設定方法の要領で設定します。
まず、2.項のbody要素のstyle属性にCSSのbackground-imageまたはbackgroundプロパティを設定する方法(CSSインライン設定)は下記の通りです。
<body style="background:url('画像ファイルパス')">
<body style="background-image:url('画像ファイルパス')">
次に3.項のheadタグ内でstyle要素を定義、その内側でbody要素・タグにCSSのbackground-imageまたはbackgroundプロパティを設定する方法(CSSファイル内部設定)は下記の通りです。
body { background:url('画像ファイルパス') }
body { background-image:url('画像ファイルパス') }
<body>
</body>
そして4.項の外部ファイルで設定については、このプロパティ設定部分だけを記述して別ファイルとして保存、HTML/XHTMLで読み込む為の設定をすれば、そのファイル内にCSS設定が適用されます。
尚、この背景に関するプロパティは、ブロックレベル要素、インライン要素に関わらず、HTML/XHTMLのほぼ全ての要素・タグに適用可能です。
CSS/スタイルシート情報
