背景に模様を付ける

このサイトについて サイトマップ


アフィリエイトで稼ぐのは厳しい ⇒ 速習HTML ⇒ 背景に模様を付ける


コンテンツの外側背景に模様を付けます。

  この文字をクリックするとサンプルダウンロード出来ます。


配置を調整する ← | → 紹介ページの概要を作成


コンテンツの外側背景に模様を付けます。

全体が真っ白なので、コンテンツ領域の外側背景に模様をつけます。

画像を準備して、スタイルシートだけで設定します。

準備する背景画像は back.gif です。

● スタイルシートに以下を追加します

body    背景の模様画像を指定します。

これで全て完了です。



● 各項目の説明。

@ body 全体の背景を指定します。

・画像を指定する場合には、background-image: url(画像ファイル名)で指定します。
・http://abc.com/img/xxx.gif などサイトurlのフルパスでも指定できます。
・自サイトの場合はファイル名を拡張子付で指定します。
・準備する画像の大きさは、最小の大きさで構いません。例題では19×19ピクセルです。
 この画像が繰り返し表示されます。

 繰り返したく無い場合は、no-repeat; を追加指定しますが、大きさは全体の大きさとピッタリ
 同じにする必要があります。

・単に色を付ける場合には background-color:色名又は色コード; で指定します。


A 背景模様、背景色は好みの問題です。

このサイトは背景模様も色も付けていません。サンプルは例題として模様をつけました。




サンプルを表示したイメージです。完成です。

中のコンテンツ背景が白抜きになっているのは<div>で指定したcontainertopセレクタで背景色を白としていた為です。属性値が重複する場合には、より近くで指定したものが優先されます。

  完成画像