ちょっとオシャレにアメブロに背景画像を

こんばんは。

ちょっと時間があいちゃった時、
こんな事、やってみるのは、いかがでしょうか・・

アメブロ全体に背景画像

※CSS編集用デザイン

/*ブログ全体背景画像、08-31（１）*/
.skinBody{
background:url(https://e43dbcc73a4fa815698161dc653382083c71d653.googledrive.com/host/0B84mQqgu9kPGNmM2aVp4TXdDOGc/222.png);
}

アメブロに背景画像を入れてサンプルを
作ってみました。



見本画像の下にCSSに貼り付ける
コードと使用した画像を貼ってます。

コードの画像URLは、自分のグーグルドライブ
にアップして取得したものです。
アメブロ以外のサイトで使用しても消えて
しまう事は無いと思います。

もし御心配でしたら、見本の画像を
一旦、御自身のパソコンに保存してから、
アメブロ等の画像フォルダーにアップした
ものを使われると良いのではと思います。

/*ブログ全体背景画像、08-31（２）*/
.skinBody{
background:url(https://e43dbcc73a4fa815698161dc653382083c71d653.googledrive.com/host/0B84mQqgu9kPGNmM2aVp4TXdDOGc/444444.png);
}

-----

/*ブログ全体背景画像、09-01*/
.skinBody{
background:url(https://e43dbcc73a4fa815698161dc653382083c71d653.googledrive.com/host/0B84mQqgu9kPGNmM2aVp4TXdDOGc/6.png);
}

-----

/*ブログ全体背景画像、09-01-2*/
.skinBody{
background:url(https://e43dbcc73a4fa815698161dc653382083c71d653.googledrive.com/host/0B84mQqgu9kPGNmM2aVp4TXdDOGc/d8.png);
}

-----

/*ブログ全体背景画像、09-07*/
.skinBody{
background:url(https://e43dbcc73a4fa815698161dc653382083c71d653.googledrive.com/host/0B84mQqgu9kPGNmM2aVp4TXdDOGc/2.png);
}

-----

/*ブログ全体背景画像、09-08*/
.skinBody{
background:url(https://e43dbcc73a4fa815698161dc653382083c71d653.googledrive.com/host/0B84mQqgu9kPGNmM2aVp4TXdDOGc/d1.png);
}

-----

/*ブログ全体背景画像、猫09-09*/
.skinBody{
background:url(https://e43dbcc73a4fa815698161dc653382083c71d653.googledrive.com/host/0B84mQqgu9kPGNmM2aVp4TXdDOGc/hofreematerials005_2.jpg);
}

-----

/*ブログ全体背景、コスモス、09-10*/
.skinBody{
background:url(https://e43dbcc73a4fa815698161dc653382083c71d653.googledrive.com/host/0B84mQqgu9kPGNmM2aVp4TXdDOGc/12012kosumosu2.JPG);
}

-----




（※↑縮小表示にしてあります。）

/*ブログ全体背景画像、背景固定09-10*/
.skinBody{
background:url(https://e43dbcc73a4fa815698161dc653382083c71d653.googledrive.com/host/0B84mQqgu9kPGNmM2aVp4TXdDOGc/333.jpg);
background-repeat : repeat ;background-attachment : fixed ;
}

※画像の元のサイズの大きい
ものを使って、スクロールしても、
背景画像が動かないようにしてみました。
スクロールした時、背景も一緒に動く
ようにしたい場合は、上のコードの
background-repeat : repeat ;background-attachment : fixed ;
の箇所を削除して下さい。

-----

---



---
ＣＳＳ貼り付け用コード（↓）

/*ブログ全体背景画像、コスモス09-11*/
.skinBody{
background:url(https://e43dbcc73a4fa815698161dc653382083c71d653.googledrive.com/host/0B84mQqgu9kPGNmM2aVp4TXdDOGc/w333.png);
background-repeat : repeat ;background-attachment : fixed ;
}

＊赤字の画像ＵＲＬを御自身のお好みの
画像のものと差し換えれば、他には無い
独自のブログデザインに出来ると思い
ます。

※画像ＵＲＬの取得方法を御存知ない方は
⇒画像URLを取得するには

-----

＊ＣＳＳ貼り付け用コード

/*ブログ全体背景画像、背景固定09-14*/
.skinBody{
background:url(https://e43dbcc73a4fa815698161dc653382083c71d653.googledrive.com/host/0B84mQqgu9kPGNmM2aVp4TXdDOGc/00231.png);
background-repeat : repeat ;background-attachment : fixed ;
}

-----

※ＣＳＳ用コード

/*ブログ全体背景画像、背景固定09-10*/
.skinBody{
background:url(https://e43dbcc73a4fa815698161dc653382083c71d653.googledrive.com/host/0B84mQqgu9kPGNmM2aVp4TXdDOGc/21_edited-1.png);
background-repeat : repeat ;background-attachment : fixed ;
}

-----

背景を二重にして片方はスクロール時に移動

これ、上側（手前）に見えるほうの背景は、背景を
透過処理してます。
？？チトややこしい説明（汗）

ＣＳＳ貼り付け用コードは、こちらです。

/*ブログ全体背景：二重09-15*/

/*（１）背景上：固定*/
.skinBody{
background:url(https://e43dbcc73a4fa815698161dc653382083c71d653.googledrive.com/host/0B84mQqgu9kPGNmM2aVp4TXdDOGc/00231.png);
background-repeat : repeat ;background-attachment : fixed ;
}

/*（２）背景下：スクロ－ルで移動*/
body{background-color:#ffc040;
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20140815/11/02/h4/g/o07200432okipochi1408069827996.gif);
}

＊良かったら使って下さい（↑）。
＊画像ＵＲＬも御自由に差し換えて下さい。


背景画像をダブらせて表示させて、一方は固定
させ、もう一方はスクロールすると移動して、
その移動しない方の背景は透過処理したものです。
ってか、透過処理は必須です。
ややこしい＾＾；

あまり目立たない、おとなしい画像を使って、
こんな事をやってみるのも、ちょっとオシャレ
かな～なんて思います＾＾；

-----

※赤字の箇所が画像ＵＲＬです。他にお好みの画像があれば、
その画像ＵＲＬと差し換えて下さい。

※画像ＵＲＬの取得方法を御存知ない方は
⇒画像URLを取得するには

⇒ＣＳＳ編集用デザインを適用するには

⇒マイページからＣＳＳ編集に至る手順

※コードはCSSの末尾に貼って下さい。
上の方に貼ると、その下に同じコード
があった場合に下の方が優先されて、
貼り付けたコードが反映されませんので。

他にも、こちらに、たくさんありますよ♪

⇒フリー素材*ヒバナ *　 *


☆ブィブィ　o(^_^)o☆♪♪♪

そこで諦めるなよ、もう少しで見えるのに！！

えっ！？