Edit

Page

Page title:

Page body:

* [CODE(HTMLe)[body]] 要素 [CODE(HTMLa)[background]] 属性 (HTML)

[1] [[HTML]] の [CODE(HTMLe)[[[body]]]] 要素型の要素の
[DFN[[CODE(HTMLa)[background]] 属性]]は、
視覚ブラウザで文書の背景画像として貼り合わせる[[画像]]を指定します。

[2] 仕様書:
- [[HTML 4]]
-- [CODE(HTMLe)[body]] 要素 [CODE(HTMLa)[background]] 属性
<IW:HTML4:"struct/global.html#adef-background">

** 代替

[3] この属性は'''非推奨'''です [SRC[HTML 4]]。
代わりに[[スタイル・シート]]で指定できます。

[4] [[CSS]] を使って HTML 文書の背景に画像を指定する例:
[PRE(CSS example)[
[CODE(HTMLe)[html]] {
  [[background-image]]: [[url]](http://example.org/background-image);
  [[background-color]]: [VAR[画像に近い背景色]];
  [[color]]: [VAR[画像と遠い文字色]];
}
]PRE]

[[#comment]]

** 属性値

[5] この属性の値は [CODE(SGML)[%[[URI]]]] です [SRC[HTML 4]]。
画像の [[URI参照]]を指定します。大文字・小文字は一般に区別されます。
[[SGML]] 的には [CODE(SGML)[[[CDATA]]]] です。

[6] この属性は省略可能です。

[[#comment]]

** アクセス可能性・可用性

[7] 背景画像はできるだけ薄い色のものやワンポイントだけの目立たないものを選ぶべきです。
そうしなければ文章が非常に読みづらくなってしまいます。

[8] 背景画像を指定する時は、背景画像が表示できない場合も考慮しなければなりません。
(背景画像が何らかのエラーで表示できなかった場合や利用者が背景画像を表示しないように設定している場合や背景画像をそもそも表示しないブラウザで文書を読む場合などは、
きわめて一般的です。)

背景色として背景画像全体の色合いと似たものを指定するのがよいと考えられています。
たとえば、ピンク色系の背景画像を使うときは、
似たような薄いピンク色を背景色にしておきます。
そうすれば仮に背景画像が表示できなくても、
同じような感じで表示されます。 (必ず背景画像なしで表示して確かめてみてください。)

また、背景画像・背景色を指定するときには同時に前景色
(文字色) も指定しておくことが重要です。前景色は黒であることが多いですが、
必ずしもそうではありません。好みによって灰色に変えているとか、
画面全体が黒を基調に白い文字であるとか、いろいろな場合が考えられます。
ですから、たとえ黒色であっても背景とセットで前景も指定しておかなければなりません。

[9] もちろん、一番よいのは背景も前景も指定しないことです。
そうするのが一番閲覧者にとって見やすいはずです。
文書の見栄えにこだわりたいのであれば、文書全体の背景・前景ではなく、
文章本文以外の部分 (文章の周りの部分や見出しの部分など)
で工夫するのがよいでしょう。

[[#comment]]

** 実装

[10] 多くの [[Webブラウザ]]には[[著者]]による背景画像の指定を無効にしたり、
画像の表示そのものを無効にしたりする機能が備わっています。

[11]
[CITE[Document specific background and foreground control]] ([CODE[2007-02-26 22:03:02 +09:00]] 版) <http://web.archive.org/web/19961020032532/http://www3.netscape.com/assist/net_sites/bg/index.html>

> Recent versions of the proposed HTML 3.0 spec. have added a BACKGROUND attribute to the BODY tag. The purpose of this attribute is to specify a URL pointing to an image that is to be used as a background for the document. In Netscape 1.1, this background image is used to tile the full background of the document-viewing area.

[12]
[CITE[The Background Sampler]] ([CODE[2007-02-26 22:09:08 +09:00]] 版) <http://web.archive.org/web/19961020032621/www3.netscape.com/assist/net_sites/bg/backgrounds.html>

[13]
>>11 より:

> In earlier versions of Netscape Navigator, setting a background image meant that none of your document could be displayed until the image was loaded and decoded. Now, with 2.0, text and images load first. When the background is loaded, it pops up behind the text, increasing the perceived speed of document loading.
> If you have the Auto Load Images option off, background images will not be loaded. If the background image is not loaded for any reason, and a BGCOLOR was not also specified, then any of the foreground controlling attributes (LINK, VLINK, and ALINK) will be ignored. The idea behind this is that if you didn't get your requested background image, setting your requested text colors on top a the default gray background may well make your document unreadable.

** 歴史

[23]
[[Opera]] と [[Firefox]] は [[URL]] として[[内容属性]]を[[反映]]する [[DOM属性]]であるとして (つまり[[相対URL]]
を[[絶対URL]] に変換するものとして) [CODE(DOMa)@en[[[background]]]] [[DOM属性]]を実装していましたが、
[[IE]] と [[Safari]] に揃えるため [[Opera]] も単なる[[文字列]]として[[反映]]するように変更されました。

;; [CITE[Bug 6097 – '''['''rendering''']''' <body background> is a URL attribute?]] ([TIME[2009-05-24 15:14:02 +09:00]] 版) <http://www.w3.org/Bugs/Public/show_bug.cgi?id=6097>

[24] 
[[HTML5]] でも [CODE(DOMa)@en[[[background]]]] は [[URL]] として[[反映]]する
[[DOM属性]]ではないと明記されました。

;; [CITE@en[(X)HTML5 Tracking]] ([TIME[2009-05-24 15:05:58 +09:00]] 版) <http://html5.org/tools/web-apps-tracker?from=3117&to=3118>

* メモ

[14]
[CITE@ja[html要素の背景 - 徒書]] ([[北村曉 (KITAMURA Akatsuki)]] 著, [CODE[2006-12-12 10:40:18 +09:00]] 版) <http://www.akatsukinishisu.net/itazuragaki/id/bg_of_html>
([[名無しさん]] [WEAK[2007-07-13 11:16:27 +00:00]])

[15]
>>14 See [[CSS 2.1]].

[16]
[[WinIE 6]] の [CODE(CSS)@en[[[background]]]] の[[構文解析]]では:
- 値は1つ以上いくつでも指定できます。
- 値同士は1つ以上の[[空白]]で区切る必要があります。
- 同じ [[longhand]] に対応する値が複数指定されている場合、最後に指定されたものが有効となります。
- ただし [CODE(CSS)@en[[[background-position]]]] は特殊で、
[CODE(CSS)@en[[[background-position-x]]]] または
[CODE(CSS)@en[[[background-position-y]]]] に設定できる値が現れると、
次のようにします。
== -x にこれまでに (同じ [CODE(CSS)@en[[[background]]]] [[特性]]内で)
明示的に値が設定されておらず、かつ -x に設定可能な値なら、 -x
に設定します。次の値へ。
== -y にこれまでに明示的に値が設定されておらず、かつ -y 
に設定可能な値なら、 -y に設定します。次の値へ。
== -y にこれまでに明示的に値が設定されておらず、かつ -x
に設定可能な値なら、 -x に設定します。次の値へ。
== -x にこれまでに明示的に値が設定されておらず、かつ -y
に設定可能な値なら、 -y に設定します。次の値へ。
== [[宣言]]全体を[[無視]]します。
-- つまり、 [CODE(CSS)[[[top]] [[top]] [[none]] 1[[px]]]] は
[CODE(CSS)@en[[[background-position]]: 1[[px]] [[top]]]] かつ
[CODE(CSS)@en[[[background-image]]: [[none]]]] と同じですが、
-- [CODE(CSS)@en[[[top]] 1[[px]] [[top]]]] は[[宣言]]全体が[[無視]]されます。

([[名無しさん]])

[17]
[[Firefox]] 2 と [[Opera]] 9 はわかっている限りでは [[CSS 2.1]]
通りに解釈してくれます。
([[名無しさん]])

[18]
[[Firefox]] 2 は
[CODE(CSS)@en[[[-moz-background-clip]]]],
[CODE(CSS)@en[[[-moz-background-origin]]]],
[CODE(CSS)@en[[[-moz-background-inline-policy]]]]
も[[初期値]]らしい [CODE(CSS)@en[[[-moz-initial]]]]
に設定します。最初の2つは [[CSS 3]] にあるものですが、
[CODE(CSS)@en[[[background]]]] 内で値を指定することも一応できますが、
[[Firefox]] 2 では実装されていないようです。
[CODE(CSS)@en[[[-moz-background-inline-policy]]]]
にも [CODE(CSS)@en[[[background]]]] で明示的に値を指定することはできないようです。

また、 [[Firefox]] 2 は [CODE(CSS)@en[[[background]]]] 系 [[longhand]]
がそろっていれば [CODE(DOMa)@en[[[cssText]]]] で [[shorthand]]
にまとめるのですが、上記の3つの[[特性]]はその対象外になっているようです。
([[名無しさん]])

[19]
[[DOM属性]] [CODE(DOMa)@en[[[background]]]] で得られる値:
- [[WinIE 6]]: 構成 [[shorthand]] すべてが[[初期値]]の場合は
[CODE(CSS)@en[[[none]] [[transparent]] [[scroll]] [[repeat]] 0[[%]] 0[[%]]]]。
それ以外の場合、[[初期値]]と異なるものだけこの順序の
[CODE(charname)@en[[[SPACE]]]] 1つ[[区切り]]。
- [[Firefox]] 2: 
[CODE(CSS)@en[[[background-color]]]],
[CODE(CSS)@en[[[background-image]]]],
[CODE(CSS)@en[[[background-repeat]]]],
[CODE(CSS)@en[[[background-attachment]]]],
[CODE(CSS)@en[[[background-position]]]] の順で、すべてを
[CODE(charname)@en[[[SPACE]]]]
1つ区切り。ただし、 [CODE(CSS)@en[[[background-position]]]]
の値は [CODE(DOMa)@en[[[backgroundPosition]]]] のものに準じる。
構成 [[shorthand]] の値が [CODE(CSS)@en[[[inherit]]]]
でも気にしない (ので[[非妥当]]になる)。

([[名無しさん]])

[20]
>>19 テスト用
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20background%3A%20blue%3B%0A%7D%0A;h=%3Cp%3E%3Cbutton%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0A%20%20var%20s%20%3D%20sd%20()%3B%0A%20%20w%20(s.background)%3B%0A%22%3ECSSOM%3C%2Fbutton%3E%0A%3Cbutton%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0A%20%20var%20sd%20%3D%20getComputedStyle%20(el%2C%20null)%3B%0A%20%20w%20(sd.background)%3B%0A%22%3E%3Ccode%3EgetComputedStyle%3C%2Fcode%3E%3C%2Fbutton%3E%0A%3Cbutton%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0A%20%20var%20sd%20%3D%20el.currentStyle%3B%0A%20%20w%20(sd.background)%3B%0A%22%3E%3Ccode%3EcurrentStyle%3C%2Fcode%3E%3C%2Fbutton%3E%0A;p=n;x=style-element>
([[名無しさん]])

[21]
>>20 [[Opera]] 9

[[CSSOM]]: 動作は >>19 の [[WinIE 6]]。順序は >>19 の [[Firefox]] 2。
[CODE(CSS)@en[[[inherit]]]] に関する動作も >>19 の [[Firefox]] 2。

[CODE(DOMm)@en[[[getComputedStyle]]]]: [[CSSOM]] と同じ。ただし常に
[CODE(CSS)@en[[[background-position]]]] が現れる
([[初期値]] [CODE(CSS)@en[0% 0%]] の[[算出値]]が
[CODE(CSS)@en[0[[px]] 0[[px]]]] となり、
[[文字列]]としては[[初期値]]と異なるため)。

[CODE(DOMa)@en[[[currentStyle]]]]: 
[CODE(DOMm)@en[[[getComputedStyle]]]] と同じ。
ただし [CODE(CSS)@en[[[background-color]]]] に[[色名]]を指定すると
[CODE(example CSS)@en["red"]] のように括られる (これは
[CODE(DOMa)@en[[[backgroundColor]]]] でも同じ)。
([[名無しさん]])

[22]
>>20 [[Firefox]] 2 [CODE(DOMm)@en[[[getComputedStyle]]]]: 常に[[空文字列]]。

[[WinIE 6]] [CODE(DOMa)@en[[[currentStyle]]]]: [CODE(JS)@en[[[undefined]]]]。

[25] [CITE[Document specific background and foreground control]]
( ([TIME[2013-03-05 11:23:00 +09:00]] 版))
<http://web.archive.org/web/20020806181026/http://wp.netscape.com/assist/net_sites/bg/>

[26] [CODE(DOMa)@en[[[cssText]]]] で [[Firefox]] は可能なら [CODE(CSS)@en['[[background]]']] 
にまとめますが、 [[Chrome]] はまとめません。 [TIME[2013-09-07T10:30:00.500Z]]

[27] [[Firefox]] も [[Chrome]] も [CODE(CSS)@en[[[background]]]] の各 longhand の値が[[初期値]]であっても省略しません。
[TIME[2013-09-07T13:43:21.00Z]]

[28] [CITE@en[background attribute | background property (Internet Explorer)]]
( ([TIME[2014-03-09 05:43:31 +09:00]] 版))
<http://msdn.microsoft.com/en-us/library/ie/ms533498(v=vs.85).aspx>

[29] [CITE@en[Re: color: NCSA Mosaic, Netscape, and HTML3]]
( ([[Lou Montulli]] 著, [TIME[1995-07-19 10:26:26 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-style/1995Jul/0080.html>

[30] [CITE[Re: color: NCSA Mosaic, Netscape, and HTML3]]
( ([TIME[2013-04-18 01:14:10 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-html/1995Jul/0203.html>

[31] [CITE[Welcome to Netscape Navigator Version 2.0]]
( ([TIME[2014-04-07 08:49:02 +09:00]] 版))
<http://web.archive.org/web/20030202175634/http://wp.netscape.com/eng/mozilla/2.0/relnotes/windows-2.0.html#Images>

[32] [CITE@en[Fixes #29. Remove prefixed properties not shipping in WebKit or Blink. · whatwg/compat@a55e44f]]
([TIME[2016-01-17 15:38:57 +09:00]] 版)
<https://github.com/whatwg/compat/commit/a55e44f39ac67aab4c8efb7b01274eb702c18785>

[33] [CITE@en[URLs are parsed and produce records · whatwg/html@30bc255]]
([TIME[2016-02-14 23:06:12 +09:00]] 版)
<https://github.com/whatwg/html/commit/30bc2557105ad62881ec9670f253febbc9761b44>

[35] >>34 
[CODE[td]] [[要素]] [CODE[background]] [[属性]]の実利用例

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)