背景に模様を付ける

売れるホームページの作り方 ⇒ 速攻HTML ⇒ 背景に模様を付ける


速攻HTML

コンテンツの外側背景に模様を付け見やすくします

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



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


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


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


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


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


body 
 { color: #444444;
 background-color: #66aa66;
 background-image: url(back.gif); }



これで全て完了です。




● 各項目の説明。


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


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


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


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



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


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





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


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


  完成画像