気の向くままに辿るIT/ICT
webzoit.netウェブサイトホームページ
CSS / Cascading Style Sheets / スタイルシート

background / background-image CSS背景画像設定

ウェブ造ホーム前へ次へ
サイト内検索
カスタム検索
ページ背景画像指定HTML background / CSS background / background-image

background / background-image CSS背景画像設定

background / background-image CSS背景画像設定

 スタイルプロパティまたはCSSプロパティで背景画像を設定するには、背景画像専用のbackground-imageプロパティまたは、background-imageを含む背景関連プロパティをまとめて設定することが可能な略記プロパティであるbackgroundプロパティを利用します。

CSS1 background-image / CSS2 background-image / CSS3 background-image

CSS1 background / CSS2 background / CSS3 background

CSSとHTML/XHTMLによる背景画像の各種スタイル設定と推奨される方法

 W3C仕様HTML4/XHTML1HTML5ではbody要素・タグに限らず、背景画像を設定するには以下の4つの方法がありますが、HTML4においても下記1.項のHTMLのbackground属性による設定方法は非推奨となっており、CSSによる設定もCSS1で2.項、3.項が定義されましたが、CSS2(CSS 2.0/CSS 2.1)/CSS3含む以降はスタイル設定には4.項のCSS外部ファイル設定が推奨されます。

  1. body要素のbackground属性を設定
    (HTML3.2で定義/【W3C非推奨】)
  2. body要素のstyle属性にCSS設定
    (CSS1/HTML3.2で定義)
  3. headタグ内でstyle要素を定義、その内側でCSS設定
    (CSS1/HTML4で定義)
  4. 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ファイル内部設定)は下記の通りです。

<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">

body { background:url('画像ファイルパス') }

/*
または

body { background-image:url('画像ファイルパス') }

*/
</style>
</head>

<body>

</body>

</html>

 そして4.項の外部ファイルで設定については、このプロパティ設定部分だけを記述して別ファイルとして保存、HTML/XHTMLで読み込む為の設定をすれば、そのファイル内にCSS設定が適用されます。

 尚、この背景に関するプロパティは、ブロックレベル要素、インライン要素に関わらず、HTML/XHTMLのほぼ全ての要素・タグに適用可能です。

え?!テーブルにも背景色?!です。

CSS/スタイルシート情報

ウェブ造ホーム前へ次へ