CSS　背景3

CSS　背景1　で・・・

一番下にコルク画像を敷き詰めて

ブログのすぐ下にブログの背景画像を縦に繰り返して入れました・・

今度はその間に背景画像を入れてみます

とはいっても・・・

背景画像を敷き詰めてしまってはせっかくのコルク画像が見えなくなってしまいますので

背景画像といってもワンポイント的な画像を1つ表示することになると思います

このブログでいったら・・・

上の請求書の封筒画像

一番下に表示されているフロッピーの画像

左サイド中ほどに表示されているブログの説明のメモ用紙

この3つの画像を配置しています

特に・・・今までやりにくかったヘッダー画像がブログの幅をはみ出している（ココの請求封筒みたいに・・）

これが簡単に出来るようになっています

（だから背景を説明するまでヘッダー部分の記事が書けませんでした・・）

とりあえずはヘッダー画像はおいておいて・・・

基本のbody↓（CSS　背景1 ）

bodyの上に1つの背景画像を表示します（このブログで言えば請求封筒）

/*背景下から2枚目*/
.skinBody{
background-image:url(画像のURL);/*背景画像*/
background-position:center top;/*中央上に表示*/
background-repeat:no-repeat;/*繰り返さない*/
}

これらのプロパティーは　CSS　背景2 　で説明しています

変更するとすれば

background-position:center top;/*中央上に表示*/
この表示位置だけではないでしょうか・・・

前の記事でも説明していますが横方向の位置はcenterまたは50%以外は見ている方のディスプレイによって見え方が違う場合がありますので注意ください

その上にもう1つ背景画像を表示します（このブログでブログ下のフロッピー）

/*背景下から3枚目*/
.skinBody2{
background-image:url(画像のURL);/*背景画像*/
background-position: 50% 100%;/*中央下*/
background-repeat:no-repeat;/*繰り返さない*/
}

さらにその上にもう1つ（このブログ左にあるスクロールしても動かないメモ帳）

/*背景下から4枚目*/
.skinBody3{
background-image:url(画像のURL);/*背景画像*/
background-position: 0% 70%;/*左端上から70%*/
background-repeat:no-repeat;/*繰り返さない*/
background-attachment:fixed;/*スクロールしても位置固定*/
}

たぶん3つも入れる方はおられないと思いますが・・・

入れてみたい方は工夫してトライください

特に今までブログをはみ出して表示する画像はブログ内に表示する画像とブログの外の背景に表示する画像の2つに分けてからお互いの位置合わせをして表示させていましたが・・・

今度のスキンでは背景がいくつも入れたれますので1つの画像で実現することが出来るようになりました

上でもチョットだけ書いていますが・・・

このブログはヘッダー画像は使っていません

請求書の封筒はただの背景画像なんです・・・

（ヘッダー画像も背景画像としてCSSで設定するんですが・・？）

その画像の上にだいたいの位置を合わせてブログトップへ戻る透明のエリアを作っているんです

次はいよいよヘッダー画像の説明になります・・・　つづきます

標準ではブログの横幅は980pxです

横幅が800pxオーバーですからCSSの編集のブログデザインヘッダ・背景用画像の追加にアップします

新・アメブロ向上企画書　アメブロの「CSS編集用デザイン」のカスタマイズ

アメブロの新スキン（CSS編集用デザイン）のカスタマイズ
アメーバブログをＣＳＳでカスタマイズして自分だけのオリジナルなデザインでアメブロを楽しんでください

CSS　背景3

CSS 背景3

CSS　背景3