あなたのサイトのデザイン：CSSの背景

ウェブサイトのデザインは（いない場合はもっと）も同様にその機能と使いやすさよりも重要です。 それはfoundationally視覚的にだけでなく、強くなるために成功したウェブサイトのための基本です。

のが私のポイントを説明するためにシスティーナ礼拝堂を議論する一瞬を見てみましょう。 チャペル自体は最後に構築されており、foundationally音ですした。 しかし、礼拝堂は、その機能を単に有名ではありません。 ミケランジェロの有名な絵画は、礼拝堂の天井にかかっていると芸術的美しさに畏敬の念を抱いてほとんどの葉。 この組み合わせの結果は非常に単純に世界最大の礼拝堂の一つです。

ウェブサイトは、グランドデザインの存在や幻想的なコードのどちらかに依存して存在することができますが、順番にウェブサイトがそれを繁栄するための2つを組み合わせることが不可欠です。

この記事では、私はCSSでデザインとコーディング方程式の重要な部分を見てしたいと思います。より多くのCSSのbackgroundプロパティを指定します。

W3Schoolsには、CSSのbackgroundプロパティが定義されています："1つの宣言ですべての背景のプロパティを設定する短縮プロパティ"ほとんどのBackgroundプロパティの中で見つかった値に注意が自分の財産として使用することができます。 以下の例は、Backgroundプロパティの簡略バージョンを使用することになります。 だけ速記を使用する欠点は、スペルの間違いをデバッグしたり、発見するための素晴らしいではないということです

カラー：最も基本的な価値、すべてのbackgroundプロパティで最初にされるべきものを見てから始めましょう。

body {
background: #000000;
}

簡単な使用してカラー値を 、バックグラウンドは非常に明白で、シンプルにすることができます。 このシンプルさは、多くのウェブサイトのために有益です。 優秀な設計技術が必ずしもどこでも派手なイメージとWeb 2.0のベベルを意味するものではないことに留意してください。 backgroundプロパティで使用される色に加えて、透明の値を使用することができます。 透明な値は、ここに見られる体の背景に、一般的に主をしないような内部のdiv要素やテーブルなど、サイト内の背景で使用しています。

カラー値は、常にあなたの背景のプロパティ内のアンカーポイントである必要があります。 あなたが1000 +のピクセルにまたがってあなたの背景の画像がある場合でも、あなたはまだ背景画像は、ユーザーをロードしている間と、自分で真っ白な背景を表示しないようにそれの後ろの色の値を配置するとしている素敵な暗いウェブサイト 。

次に、特に今日のウェブの世界では別の重要なバックグラウンド値、、背景画像を話し合うことができます。

body {
background: #000000 url(images/yourimage.jpg) repeat fixed top;
}

画像は、さまざまな方法で、と背景 - 添付ファイル、背景、位置、および背景リピートのような値と組み合わせて使用​​することができます。 あなたの体の背景に何ができるかに終わりはありません。 あなたがこれらの他の値を追加しなくてもCSSに画像を配置できますが、それは4つの値が一緒に残っていることが不可欠である。

上記と下記の実施例は、背景リピート値の助けを借りて、背景画像の値を使用できるだけでいくつかの方法を示しています。 繰り返し再生するように設定はbackground - repeatの値を持つシンプルな模様の背景は、上記図示されている。 - xを繰り返し再生するように設定されている値のより複雑なバージョンは以下の通り見ることができます。 中心のイメージはのようなノー繰り返しに値を設定することによって実現することができる素敵な暗いウェブサイト 、あなたのサイトのスタイルをハイライトで背景の位置と背景-添付ファイルの値の援助によってサポートされている背景リピートと背景イメージ。