HTMLにおけるbackground-image属性の設定の詳細な説明

写真といえば、まず背景画像が思い浮かびます。私たちの装飾の多くは背景画像を使用して実現されているからです。この場合は、背景画像を制御する CSS から始めましょう。

定義と使用法

background-image プロパティは、要素の背景画像を設定します。

要素の背景は、パディングと境界線を含み、余白を除く要素全体のサイズを占めます。

デフォルトでは、背景画像は要素の左上隅に配置され、水平方向と垂直方向に繰り返されます。

1.CSSは背景画像を制御します。

ウェブページのデザインを始めるとき、背景画像が何であるかについてはあまり考えないかもしれません。なぜなら、ほとんどの場合、背景色をデザインするだけでよいからです。その理由は非常に単純で、フォアグラウンド ミュージックと同様に、背景はウェブページを開く速度に一定の影響を与えるからです。しかし、一般的な個人サイトや個人ブログでは、自分の個性を表現するために欠かせないものとなっています。もちろん、完璧すぎるものはありません。長所と短所があります。つまり、画像が利用できないが CSS が利用できる場合は、代替コンテンツが表示されません。したがって、ナビゲーション ボタンのテキストなどで CSS 背景画像を使用することはお勧めしません。
背景画像を制御するための CSS プロパティは多数あり、そのほとんどは画像に関連するものであれば使用できます。

（１）背景画像のインポート：

もちろん、誰もが最もよく知っているのは、background と background-image です。
Web ページの背景画像をデザインするためのコードは次のとおりです。

本文 {background:url("d:\images\04.jpg")}

または

本文 {背景画像:url("d:\images\04.jpg")}
このようにして、背景として使用したい画像を Web ページにインポートできます。

（２）背景画像の表示方法：
もちろん、上記のコードだけを使用しても、望む効果を表現することはできません。なぜなら、画像が小さいとタイル状に表示され、大きいとスクロールバーが表示されて表示されてしまうからです。そのため、background-repeat を使用するなど、さらに表示制御を行う必要があります。

次の値を取ります:

repeat : デフォルト値。縦方向と横方向の両方向の背景画像タイル
no-repeat : 背景画像はタイル表示されません
repeat-x : 背景画像は水平方向にのみ並べられます
repeat-y : 背景画像は垂直方向にのみ並べられます

コードについては、CSS について少しでも知っている人なら、次のようになると思います。
本文 {background:url("d:\images\04.jpg");background-repeat:no-repeat}
この場合は元の画像サイズで表示されます。

（３）背景画像サイズの制御：

しかし、問題は、画像が大きすぎる場合はどうなるかということです。良いウェブページを作るには、大きすぎる画像を使用しないことがベストです。理由は上で述べたとおりで、ウェブページを開く速度に影響します。 PS または FireWorks を使用して処理したほうがよいでしょう。しかし、そういえば、画像のサイズを制御するのに CSS を使用するのもいいかもしれません。
多くの人が自然に次のコードを使用すると思います。

それは良いアイデアですが、ブラウザはそれをサポートしていますか? IE や FF は間違いなく見て見ぬふりをすると思います。フォーラム スタイルを設計したとき、それが実現可能だったのかと疑問に思うかもしれません。上記のコードだけだと、BODYのサイズを制御するだけなので、画像を制御するのは不可能だと思います。もちろん、これは制御不能です。他のIDタグであれば、タグのサイズを制御できると思います。ハハ、もちろん画像のサイズではありません。
正直に言うと、この問題はあなたを悩ませているだけでなく、私も悩ませています。それは単なるプロパティ値であり、実際のオブジェクトではないからです。 CSS を使用して制御することをお考えの場合は、忘れずにお知らせください。

補足: W3C は 9 月 10 日に「CSS 背景と境界モジュール レベル 3」というタイトルの記事を公開しました。この記事では、CSS 背景にこれまで見たことのないいくつかのプロパティが追加されました。

背景クリップ:
背景の起源:
background-size : 背景サイズ。
背景ブレーク：

これらの属性は存在しますが、現在それらをサポートするブラウザはありません。とても悲しいです。

（４）背景画像の位置制御：

背景画像をインポートしましたが、その位置がまったく受け入れられません。デフォルトでは左上揃えになっているためです。しかし、このように配置したくないので、どうすればよいでしょうか?心配しないでください。エキサイティングな瞬間がもうすぐやって来ます。では、background-position、background-position-x、background-position-y について学んでいきましょう。

a. 基本的な構文:

背景位置: 長さ || 長さ
背景位置: 位置 || 位置
背景位置x: 長さ | 左 | 中央 | 右
background-position-y : 長さ | 上 | 中央 | 下

b. 構文値:

長さ: パーセンテージ | 浮動小数点数と単位識別子で構成される長さの値。
位置: 上 | 中央 | 下 | 左 | 中央 | 右

c. 例:

本文 { 背景画像: url("d:\images\04.jpg"); 背景位置: 50% 50%; 背景繰り返し: 繰り返しなし; }
本文 { 背景画像: url("d:\images\04.jpg"); 背景位置x: 50%; 背景繰り返し: 繰り返しなし; }
本文 { 背景画像: url("d:\images\04.jpg"); 背景位置 y: 50%; 背景繰り返し: 繰り返しなし; }

length | top | center | bottom の値については、以下の 3 つの例のみを記述します。

本文 { 背景画像: url("d:\images\04.jpg"); 背景位置: 右上; 背景繰り返し: 繰り返しなし; }
本文 { 背景画像: url("d:\images\04.jpg"); 背景位置: 50% 中央; 背景繰り返し: 繰り返しなし; }
本文 { 背景画像: url("d:\images\04.jpg"); 背景位置: 60px 中央; 背景繰り返し: 繰り返しなし; }

たくさんの例を挙げていただいたので、ポジショニングについてはある程度理解していただけたと思います。

（５）背景画像の透明度設定：

場合によっては、画像を常に透明に設定したいことがあります。

（６）複数の背景画像を設定する：

「Beyond CSS: The Essence of Web Design Art」で複数の背景画像の設定を見ました。しかし、残念なことに、現在タブ内で複数の背景画像をサポートしているブラウザは非常に少なく、私が知っているのは Apple Safari だけです。どうしてこんなことが可能なのかと疑問に思うかもしれません。この例を見終わった後、あなたは「ああ、CSS3 以前は、各要素に 1 つの画像しか使用できなかったのに」と驚くと思います。それを研究したい場合は、すぐに SAFARI ブラウザをインストールしてください。私にとって、これが前進への道だと信じています。一言で言えば、CSS を解釈する能力が強い人が開発のトレンドとなり、完璧な WEB 標準を持つ人が明日のブラウザのスターとなるでしょう。

コードは次のとおりです。