CSSでテクニックを実行する
ウェブサイトを設計している場合は、固定背景画像やウォーターマークをウェブページ上に作成する方法を学ぶことに興味があるかもしれません。 これはかなりの期間オンラインで普及している一般的なデザインの治療法です。 これは、あなたのウェブデザインの袋に持つ便利な効果です。
前にこれをやっていないか、運がなければそれを試したことがあると、プロセスは脅かされるように見えるかもしれませんが、実際はそれほど難しくありません。 この簡単なチュートリアルでは、CSSを使用して数分でテクニックをマスターするために必要な情報を得ることができます。
入門
背景画像またはウォーターマーク（実際には非常に明るい背景画像）は、印刷されたデザインの履歴があります。 ドキュメントには長い間、ウォーターマークがコピーされないようにするための透かしが含まれていました。 さらに、多くのチラシとパンフレットは、印刷された部分のデザインの一部として大きな背景イメージを使用します。 ウェブデザインは長い間、プリントからスタイルを借りており、背景イメージはこれらの借用スタイルの1つです。
これらの大きな背景画像は、次の3つのCSSスタイルプロパティを使用して簡単に作成できます。
- 背景イメージ
- バックグラウンドリピート
- 背景アタッチメント
- 背景サイズ
背景 - イメージ
背景画像を使用して、ウォーターマークとして使用する画像を定義します。 このスタイルでは、ファイルパスを使用して、サイト上にある画像（「画像」という名前のディレクトリ）をロードするだけです。
背景画像：url（/images/page-background.jpg）;
画像そのものは、通常の画像よりも明るく、透明であることが重要です。 これにより、半透明の画像がテキスト、グラフィックス、およびウェブページの他の主要な要素の背後にある「ウォーターマーク」の外観が作成されます。 このステップがなければ、背景イメージはページの情報と競合し、読みにくくなります。
Adobe Photoshopなどの編集プログラムで背景画像を調整できます。
バックグラウンド - リピート
background-repeatプロパティは次に来る。 イメージを大きな透かしスタイルのグラフィックにしたい場合は、このプロパティを使用してそのイメージを1回だけ表示させます。
バックグラウンドリピート：no-repeat;
「no-repeat」プロパティがない場合、デフォルトでは画像はページ上で何度も何度も繰り返されます。 これはほとんどの現代のWebページデザインでは望ましくないので、このスタイルはCSSで必須とみなされます。
背景アタッチメント
背景アタッチメントは、多くのWebデザイナーが忘れる性質のものです。 これを使用すると、「固定」プロパティを使用するときに背景画像が固定されたままになります。 そのイメージをページ上に固定されたウォーターマークに変えるものです。
このプロパティのデフォルト値は "scroll"です。 background-attachment値を指定しないと、背景はページの残りの部分とともにスクロールします。
背景添付：固定;
バックグラウンドサイズ
背景サイズは新しいCSSプロパティです。 表示されているビューポートに基づいて背景のサイズを設定することができます。これは、さまざまなデバイスでさまざまなサイズで表示されるレスポンシブウェブサイトに非常に役立ちます。
背景サイズ：カバー;
このプロパティで使用できる2つの有用な値は次のとおりです。
- Cover - 背景を拡大縮小して、全幅または全高のいずれかを表示します。 つまり、画像の一部が画面に表示されない場合がありますが、領域全体がカバーされます。
- Contain - スタイルの対象となる領域に幅と高さの両方が表示されるように画像を拡大/縮小します。 画像は切り取られませんが、欠点はその領域の一部が画像で覆われないことです。
あなたのページにCSSを追加する
上記のプロパティとその値を理解したら、これらのスタイルをWebサイトに追加できます。
単一ページのサイトを作成している場合は、WebページのHEADに以下を追加します。 マルチページサイトを構築していて外部シートの機能を利用したい場合は、外部スタイルシートのCSSスタイルに追加します。
<スタイル>
<！ -
体 {
背景画像：url（/images/page-background.jpg）;
バックグラウンドリピート：no-repeat;
背景添付：固定;
背景サイズ：カバー;
}
// - >
サイトに関連する特定のファイル名とファイルパスに一致するように背景イメージの URLを変更します。 デザインに合わせて適切な変更を加えると、ウォーターマークが表示されます。
位置を指定することもできます
ウォーターマークをWebページの特定の場所に配置する場合は、そのようにすることもできます。 たとえば、ウォーターマークをページ中央または下部コーナーに配置することができます（デフォルトの上部コーナーではありません）。
これを行うには、スタイルにbackground-positionプロパティを追加します。 これにより、画像を表示したい場所に正確に配置します。 ピクセル値、パーセンテージ、またはアラインメントを使用して、その位置決め効果を実現できます。
バックグラウンド位置：center;