小粋空間  -  a cheap joke and a play on words site

背景画像を固定する

背景画像が固定されているサイトを時々みかけるのですが、ご質問を頂いたので本エントリーにてカスタマイズ方法をご紹介致します。今回は順を追ってサンプルも作ってみました。

１．背景を固定する

CSSの body 要素に背景画像を指定し、背景画像の指定に対して下記のように青色のプロパティ background-attachment プロパティを追加します。このプロパティの値が fixed の場合、画像が固定表示されます。

body {
    background-image: url(hogehoge.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
}

公開テンプレートの場合、この設定を styles-site.css の一番下に追加してください（場所はどこでも大丈夫だと思います）。画像の配置位置は background-position プロパティで指定します。上のリストでは「右下」を指定していますが、プロパティの値は

水平方向：左：left／中央：center／右：right

垂直方向：上：top／中：center／下：bottom

のいずれかお好きなものを指定してください（"%"指定等、他の設定方法についてはここでは割愛します）。

また上のサンプルでは background-repeat プロパティで画像を繰り返し表示しない設定になっています。水平方向に繰り返し表示する場合は background-repeat プロパティに repeat-x を、垂直方向に繰り返し表示する場合は repeat-y を指定してください。

公開テンプレートに設定したサンプル（リキッドレイアウト／固定レイアウト）

２．他の背景に隠れないようにする

上記のサンプルでお分かりの通り、画像の上に表示される各オブジェクトに対し背景色を指定していると部分的に隠れてしまいます。固定レイアウトは画像の影も形もありません。これは日付やエントリー部分、固定レイアウトの場合は全体に背景色として「白」を指定しているため、画像が隠れてしまう訳です。

画像を隠さないようにするためには、該当のセレクタ（.entry）の background プロパティ（下記赤色）

.entry {
    width: auto;
    margin: 0 5px 15px;
    color: #36414d;
    background: #ffffff;
　　　　　　：
　　　　　（略）
　　　　　　：
}

を削除してください。
固定3カラムや固定2カラムの場合は、さらに下記の赤色部分を削除してください。

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}
　　　　　　　　：
.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

公開テンプレートに設定したサンプル（リキッドレイアウト／固定レイアウト）

３．画像を透過する

２項の設定でかなり画像の露出度が向上しましたが、日付やサイドメニュータイトルといった background を指定しているものについては隠れてしまっているのがお分かりになると思います。そこでさらに透過指定を行うことで、画像を日付やサイドメニュータイトルの下からうっすらと表示させることができます。

下記の filter プロパティおよび opacity プロパティ（青色部分）の追加で透過することができます（方法は他にも色々あると思いますがとりあえず）。

3カラムリキッドレイアウトの場合

body {
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}
 
.layout-three-column-liquid #links-left{
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}
.layout-three-column-liquid #links-right{
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}

3カラム固定レイアウトの場合

body {
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}
 
.layout-three-column #links-left,
.layout-three-column #links-right {
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}

プロパティ値にある「80」 や「0.8」が透明度を表しますのでお好きな比率に調整してください。また2カラムの場合は設定するセレクタが異なります（layout-two-column や layout-two-column-liquid-left 等）ので、ご注意ください。
なお半透明にする詳細については、背景を半透明にするを参照ください。

公開テンプレートに設定したサンプル（リキッドレイアウト／固定レイアウト）

画像は Suggestive Contour Gallery より拝借しました。
これぞまさしく、