全体の背景画像（位置左固定）

BACK

---

■ 全体の背景画像（位置左固定）

---

★　全体の背景画像を設定（固定　スクロールについて行かない）します。
　　（ＣＳＳへ追記して下さい）

/* ----------------------------------------------------- */
/* ■ 全体の背景画像（位置左固定） 　　　　　　　　　　　*/
/* ----------------------------------------------------- */
body{
background-image:url(固定化したい背景画像のＵＲＬ);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left bottom;
}

★　横、縦を指定（background-position）

　横　・・・・　left center right
　縦　・・・・　top center bottim
　％による指定も出来ます。
　（背景画像が表示される左上からの距離を％で指定）

◆　例　（下記をクリック）

ここをクリックして下さい。

★　全体の背景画像を設定（固定　スクロールについて行く）します。
　　（ＣＳＳへ追記して下さい）

/* ----------------------------------------------------- */
/* ■ 全体の背景画像（位置左 スクロール）　　　　　　　　*/
/* ----------------------------------------------------- */
body{
background-image:url(背景画像のＵＲＬ);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:left center;
}

◆　例　（下記をクリック）

ここをクリックして下さい。

---

★　背景画像を透過によって見えるようにします。（フレーム・左右サイドバー）

/* ----------------------------------------------------- */
/* ■ 全体の背景画像透過 　　　　　　　　　　　　　　　　*/
/* ----------------------------------------------------- */
#frame{
background-color:transparent;
}
#sub_a{
background-color:transparent;
}
#sub_b{
background-color:transparent;
}

◆　例　（下記をクリック）

ここをクリックして下さい。

---

★　サイドバー～記事に背景を全体的に配置します。

/* ----------------------------------------------------- */
/* ■ サイドバー～記事の背景画像（繰り返し） 　　　　　　*/
/* ----------------------------------------------------- */
#frame{
background-image:url(画像のＵＲＬ);
background-repeat:repeat;
}
#sub_a{
background-color:transparent;
}
#sub_b{
background-color:transparent;
}

◆　例　（下記をクリック）

ここをクリックして下さい。

---

★　透過度を指定して透過します。

/* ----------------------------------------------------- */
/* ■ 全体の背景画像透過 　　　　　　　　　　　　　　　　*/
/* ----------------------------------------------------- */
#sub_a{
filter:alpha(opacity=80);

opacity:0.8;
}
#sub_b{
filter:alpha(opacity=80);
opacity:0.8;
}
#frame{
filter:alpha(opacity=80);
opacity:0.8;

}

◆　例　（下記をクリック）

ここをクリックして下さい。

◆　透過度は調整して下さい

filter:alpha(opacity=80); ・・・・ ＩＥ用
opacity:0.8; ・・・ FireFox 用

◆　下記記事を参照

http://ameblo.jp/new-bulue9/entry-10470598879.html#Top


◆　例

★上記ＣＳＳに先頭に<style type="text/css">、最後尾に</style>を追加して、
フリープラグインへ追加しても可能です。
<style type="text/css"> ～ＣＳＳ内容～　</style>
フリースペースにも入れることが可能です（但し、改行を除いて下さい。）

BACK