ヘッダーの背景を別に設けず、ブログ全体で一つの画像を背景として表示するには、ブログ本体に画像を設定します。
アメブロの背景設定は、３か所で背景色が設定してあるので、これを無効にしないと、ブログ全体の画像を設定しても見えません。☞ 仕組み
アメブロbodyに背景設定
ブログトップ「ブログ管理」から「デザインの設定」を選び、（CSS編集）へ入ります。
背景skinの設定箇所
「現在使用中のブログデザインCSS」の中の
/* (1-2) 基本背景
--------------------------------------------*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background-color: #ffffff;
}
--------------------------------------------*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background-color: #ffffff;
}
/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
}
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
}
/* (3-3-a) ブログナビ上部
--------------------------------------------*/
/* 背景、境界線 */
.skin-blogHeaderNav {
border-color: rgba(0, 0, 0, 0.2);
background-color: #ffffff;
}
--------------------------------------------*/
/* 背景、境界線 */
.skin-blogHeaderNav {
border-color: rgba(0, 0, 0, 0.2);
background-color: #ffffff;
}
赤字の部分が背景色の設定です。削除するか、 /*background-color: #ffffff*/ の様にコメントに変えます。
色だけ変えたい場合には、それぞれの部分の色を変更します。
backgroundで画像を設定する
利用する画像は予め用意して置きましよう。
背景全体に画像を設定するといっても、全体に大きな画像を設定する場合と模様を敷き詰める場合とがあります。
「現在使用中のブログデザインCSS」の一番最後に移動します。
大きな画像を背景に設定
/*全体の背景画像*/
body {
background: url("画像のＵＲＬ");
background-attachment: fixed;
}
body {
background: url("画像のＵＲＬ");
background-attachment: fixed;
}
上の記述を「現在使用中のブログデザインCSS」に追加します。
background は background-image でも構いません。
background-attachment： fixed; の部分は、画像を固定するものです。カーソルを移動させても画像は固定されたままになります。この指定を省略すると、画像はカーソル移動とともにスクロールしていくようになります。どちらが良いかは、画像によって決めるとよいでしょう。
パターン画像を背景に設定
小さな画像で模様を敷き詰める場合も、コードは同じです。パターン画像は上下左右がつながるような画像を選びましょう。
画像は、初期値では繰り返しになります。