コピペでできるCSS編集 バックグランド編１/２
はじめに
今回から コピペでできるCSSレイアウト（excite編）を基に、図１に示すバックグランドの影を作る方法について２つの方法を公開したいと思います。今回は、bodyに影の画像を表示する方法についてです。
HTML部分は コピペでできるCSSレイアウト（excite編）をそのまま利用します。
図１ 影の表示
準備
背景に表示する画像を用意します。私が作ったのは、ブログのメイン部分が700pxとし、影を両端に10pxづつの全体で720px幅の画像を作成しました。参考までに以下のリンクの画像をダウンロードしてご利用下さい。
背景画像（右クリックして保存してね）
背景画像（右クリックして保存してね）
CSS編集
CSS編集でbody部分のコード１があるところを探して下さい。このbody部分のコード１を削除して、コード２を貼り付けます。
（MARGIN : 0PX;PADDING : 0PX;については、 コピペでできるCSSレイアウト（excite編）のCSS編集部分で追加されているので、いれてありません。）
必ずbackground-colorは、background-imageの前に指定して下さい。順番を間違えると画像が表示されないことがあります。
（MARGIN : 0PX;PADDING : 0PX;については、 コピペでできるCSSレイアウト（excite編）のCSS編集部分で追加されているので、いれてありません。）
BODY{ BACKGROUND : #FFFFFF; MARGIN : 0PX;PADDING : 0PX; }
コード１ body
body{
background-color:#ffffff;
background-image:url(イメージUTLアドレス);
background-position:center;
background-repeat:repeat-y;
}
コード2 body
必ずbackground-colorは、background-imageの前に指定して下さい。順番を間違えると画像が表示されないことがあります。
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37
| 2006-01-14 11:09
| │├レイアウト
