CSSを使用して背景画像を設定する
ウェブサイトがテキストの背後に浮かぶこれらの美しいデザインや写真をどのように管理するのか不思議に思ったことはありませんか?それはすべて、カスケードスタイルシートの魔法を通して行われます。 CSSを使用すると、ページの背景に画像を指定できるだけでなく、画像の表示方法を微調整できるため、目的の外観を得ることができます。

背景画像の基本的な構成要素は、「background-image」プロパティです。次のように、このプロパティを使用して、画像ファイルの場所をサイトに通知します。

体 {
background-image:url( "image.gif");
}

Webページの背景画像を配置するために必要なことはこれだけです。もちろん、おそらく画像の表示方法をカスタマイズする必要があります。画像をページの上部から開始し、左揃え(デフォルトの配置)ではなく水平方向の中央に配置するとします。その場合、 'background-position'プロパティをCSSルールに追加する必要があります。

体 {
background-image:url( "image.gif");
バックグラウンド位置:中央上部。
}

'background-position'プロパティを定義するとき、最初の値は水平方向の配置(左、中央、または右)を設定し、2番目の値は画像の垂直方向の配置(上、中央、または下)を設定します。

次に、画像を縦に並べる(繰り返して)のを止めますが、画像は縦に並べます。 'background-repeat'プロパティを引き出す時が来ました:

体 {
background-image:url( "image.gif");
バックグラウンド位置:中央上部。
バックグラウンドリピート:repeat-y;
}

値を「repeat-y」に設定すると、ブラウザはy軸に沿って背景画像をタイル表示するように指示されます。別名は垂直ですが、x軸(水平)ではなく、まさに望みどおりです。水平ではなく垂直に並べたい場合は、代わりに「repeat-x」値を使用します。画像をまったくタイル表示したくない場合は、「繰り返しなし」の値を指定します。デフォルト値は、画像を水平方向と垂直方向の両方にタイル表示するため、画像に最適な選択である場合は、「background-repeat」プロパティをまったく設定する必要はありません。

最後に、「background-attachment」プロパティを確認できます。デフォルトでは、ページのスクロールに合わせて画像がスクロールします。したがって、画像を垂直に繰り返していない場合、長いページがある場合、画像はページの下部まで拡張されません。これを変更するには、「background-attachment」プロパティを「fixed」に設定します。これにより、ページのスクロール方法に関係なく、背景画像がモニター上の同じ場所にとどまります。これで、背景画像のルールは次のようになります。

体 {
background-image:url( "image.gif");
バックグラウンド位置:中央上部。
バックグラウンドリピート:repeat-y;
バックグラウンドの添付:修正。
}


CSSルールをできるだけ小さくしたい場合は、次のように 'background'プロパティを使用して、すべての背景値を1行に結合できます。

バックグラウンド {
url( "image.gif")repeat-y固定中央上部。
}

'background'プロパティを使用する場合、特定の順序で値をリストする必要があります。
[背景色(使用する場合)] [背景画像] [背景リピート] [背景アタッチメント] [背景位置]。不要な値は省略できます。使用する値を適切な順序でリストするだけで、そうしないとルールが機能しません。

動画の説明: 独学でWebデザイン CSS基礎講座 第7回目 スタイルシートでの背景画像の指定方法 (マーチ 2024).