ネスティングサイト：背景画像のHTMLを作成する方法

多くの初心者のWebデザイナーは、サイトだけの創造の本質を掘り下げするために、多くの場合、HTMLの背景画像を行う方法を疑問に思います。 それらのいくつかは、この問題に対処することができれば、それはモニター上の画像の幅全体を延伸時まだ問題があります。 同時に、私はすべてのブラウザで同じように表示されているサイトを参照してくださいしたいと思いますので、クロスブラウザの要件を満たす必要があります。 次の2つの方法で背景を設定することができます使用して HTMLタグ やCSSスタイルを。 自分のために、それぞれ最適なオプションを選択します。 そのコードは別々のファイルに格納され、メインサイトのタグに余分なスピーカーを取りませんが、まず私たちは、サイトの背景にイメージをインストールするための簡単な方法を考えてみましょうので、もちろん、CSSスタイルは、はるかに便利です。

背景を作成するための基本的なHTMLタグ

そこで、我々は、画面上のHTMLの背景画像を作成する方法の質問に進みます。 美しいサイトを見るために、あなたは1つのではなく、重要な詳細を理解する必要があります。ちょうどグラデーションの背景を作るか、それを固体の色をペイントするのに十分ですが、あなたは、背景画像を挿入する必要がある場合、それはモニターの全幅を伸ばすことはありません。 画像は、サイトのページが表示されますここで、拾うか、この拡張子を持つ独自のデザインを作るために本来必要でした。 背景画像の準備ができた場合にのみ、«画像は»という名前のフォルダにドラッグします。 その中で、我々はすべて使用されている画像、アニメーションやその他のグラフィックファイルを保存します。 このフォルダには、すべてのHTMLファイルをルートディレクトリに配置する必要があります。 今、あなたは上とコードに移動することができます。 背景画像を変更するであろうことでコードを書くためのいくつかのオプションがあります。

1. タグ属性を記述します。
2. HTMLコード内のCSSスタイルを通じ。
3. 別のファイルにCSSスタイルを書きます。

HTMLのように背景画像を作るために、あなたが決めるが、私はそれが最適になる方法についていくつかの単語を言いたいと思います。 第1の方法は、タグ属性を使用して書き込むことである長い時代遅れとなっています。 それは同じコードがたくさんあることが判明したため、2番目のオプションは、非常にまれにしか使用されません。 第三の選択肢は、最も一般的かつ効果的です。 ここではHTMLタグの例を示します。

1. index.htmファイル内のタグ属性（体）を介して、第一の記録方法。 （身体の背景=「フォルダ名/ Nazvanie_kartinki.rasshirenie」）（/ボディ）：これは、この形式で格納されます。 （身体の背景=「画像/ Picture.jpg」）...（/ボディ）：それは我々がタイトル«画像»と拡張子JPG、と私たちは«画像を»という名前のフォルダで画像を持っている場合は、HTMLコードのエントリは次のようになります、です。
2. 第二の方法は、CSSスタイルを記録する必要が、それは名前のindex.htmと同じファイルに書き込まれます。 （ボディスタイル= "背景：URL（ '../画像/ Picture.jpg'）"）。
3. 記録の第三の方法は、2つのファイルに行われています。 （頭）（リンクのrel = "スタイルシート" タイプ= "テキスト/ cssの" のhref =「のhttp：//サイト/記事/ 193110 /％のD0の％9F名のindex.htmタグ（ヘッド）との文書は、そのような行を書かれています％D1％83％D1％で82％D1％8C_％D0％BA CSS_faylu「）（/頭）。 style.cssにスタイルがすでに書き込みと呼ばれるファイル：体{背景：URL（イメージ/ Picture.jpg「）}。

背景画像を作るためのHTMLのように、私たちは理解しています。 今、あなたは、画面全体の幅を横切って画像をストレッチする方法を把握する必要があります。

ウィンドウの幅に背景画像をストレッチする方法

私たちは、パーセンテージの形で私たちの画面を表しています。 これは、スクリーンの全体幅と長さを100％×100％になることが判明しました。 私たちは、この幅に画像をストレッチする必要があります。 モニターの全体の幅と長さにわたって画像をストレッチします画像ファイル記録のstyle.cssラインに追加します。 それは、CSSスタイルで書かれている通り？ それは簡単です！

ボディ

{

背景：URL（イメージ/ Picture.jpg「）

背景サイズ：100％; / *この投稿は、* /、最新のブラウザに適しています

}

だから我々は、画面上のHTMLで画像の背景を作る方法を考え出しました。 index.htmファイルに記録する方法もあります。 この方法と時代遅れけれども、しかし、初心者のために、知っていると理解することが必要です。 タグ（頭部）（スタイル）DIV {背景サイズ：カバー。 }（/スタイル）（/頭）、このレコードは、我々は、ウィンドウの幅全体にわたって配置されるバックグラウンドのために特別な手段を割り当てることを意味します。 我々は、画像を、現代のブラウザのいずれかの画面の幅全体に伸びているように、背景画像のHTMLサイトを作る方法を、2つの方法が考えられています。

固定背景にする方法

あなたは将来のWebリソースの背景として画像を使用する場合はそれがない長さに延伸され、美観を損なわないように、あなたはただ、それを固定にする方法を知っておく必要があります。 単純に少量の添加を登録するためにHTMLコードを使用します。 あなたは、背景の後にフレーズを追加するのstyle.cssを提出する必要があります：URL（画像/ Picture.jpg「）が固定されました またはその代わりにセミコロン別の行の後に追加 - 位置：固定。 このように、あなたの壁紙が固定されます。 サイト上のコンテンツをスクロール中には、テキスト行が移動していることがわかりますが、背景には、所定の位置に残っています。 だから、いくつかの方法で、HTMLの背景画像を行う方法を学びました。

HTMLのテーブルを使用した作業

多くの経験の浅いWeb開発者は、テーブルやブロックに直面し、多くの場合、HTMLの画像の背景のテーブルを作成する方法を理解していません。 すべてのように チームのHTML とCSSスタイル、Webプログラミング言語は非常に簡単です。 そして、この問題を解決するには、コードの行のペアを作成することです。 あなたは既にタグ（TR）及び（TD）で示されるように、それぞれの行と列のテーブルを書くことを知っている必要があります。 背景= URL画像：画像の形でテーブルの背景を作るために、タグ（表）、（TR）または（TD）の参照画像を参照して、単純なフレーズに追加する必要があります。 明確にするために、我々は例のカップルを与えます。

HTMLの例：代わりに、背景の絵と表

2×3テーブルを描き、そのフォルダに格納された背景画像作る "イメージ"：（表背景= "画像/ Picture.jpg"）（TR）（TD）1（/ TD）（TD）2（/ TD）（TD） 3）（/ TD）（/ TR）（TR）（TD）4（/ TD）（TD）5（/ TD）（TD）6（/ TD）（/ TR）（/表）。 だから、私たちのテーブルには、絵の背景に描画されます。

今、2×3の同一のプレートサイズを描くが、1、4、5および6（テーブル）の番号列の画像を挿入（TR）（TD背景= "画像/ Picture.jpg"）1（/ TD）（TD）2 （/ TD）（TD）3（/ TD）（/ TR）（TR）（TD背景= "画像/ Picture.jpg"）4（/ TD）（TD背景= "画像/ Picture.jpg"）5（ / TD）（TD背景= "画像/ Picture.jpg"）6（/ TD）（/ TR）（/表）。 見終わった後、私たちは、背景だけ私たちはテーブル全体を登録し、ないているそれらのセルに表示されていることを見ることができます。

クロスブラウザの互換性サイト

クロスブラウザの互換性のWebリソースのようなものがあります。 これは、あなたのサイトは等しくよく、異なる種類やブラウザのバージョンで表示されていることを意味しています。 する必要があります HTMLコード に必要なブラウザをカスタマイズし、CSSスタイル。 また、スマートフォンの近代的な時代に、多くのWeb開発者がサイトを作成しようとしていると、モバイル版とコンピュータの外観のために適合します。