<< Portable Firefo... コピペでできるCSSレイアウト... >>
 

コピペでできるCSS編集 バックグランド編1/2

はじめに


 今回から コピペでできるCSSレイアウト(excite編)を基に、図1に示すバックグランドの影を作る方法について2つの方法を公開したいと思います。今回は、bodyに影の画像を表示する方法についてです。
HTML部分は コピペでできるCSSレイアウト(excite編)をそのまま利用します。

a0031863_11161727.jpg

図1 影の表示






準備

背景に表示する画像を用意します。私が作ったのは、ブログのメイン部分が700pxとし、影を両端に10pxづつの全体で720px幅の画像を作成しました。参考までに以下のリンクの画像をダウンロードしてご利用下さい。

背景画像(右クリックして保存してね)


CSS編集

CSS編集でbody部分のコード1があるところを探して下さい。このbody部分のコード1を削除して、コード2を貼り付けます。
(MARGIN : 0PX;PADDING : 0PX;については、 コピペでできるCSSレイアウト(excite編)のCSS編集部分で追加されているので、いれてありません。)

BODY{ BACKGROUND : #FFFFFF; MARGIN : 0PX;PADDING : 0PX; }


コード1 body



body{
background-color:#ffffff;
background-image:url(イメージUTLアドレス);
background-position:center;
background-repeat:repeat-y;
}


コード2 body


必ずbackground-colorは、background-imageの前に指定して下さい。順番を間違えると画像が表示されないことがあります。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-01-14 11:09 | │├レイアウト
<< Portable Firefo... コピペでできるCSSレイアウト... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。