背景画像を固定する

背景画像を固定する

Posted at January 20,2006 11:52 PM
Tag:[CSS, Image]

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

1.背景を固定する

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 を指定してください。

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

2.他の背景に隠れないようにする

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

画像を隠さないようにするためには、該当のセレクタ(.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;
}

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

3.画像を透過する

2項の設定でかなり画像の露出度が向上しましたが、日付やサイドメニュータイトルといった 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 より拝借しました。
これぞまさしく、

「背景が象」

関連記事
zenback
人気エントリー
トラックバックURL


コメント

参りました!(笑)

そしてこのダジャレのためだけにゾウのイラストを探しているyujiroさんを想像してしまいました。

[1] Posted by gerbera : January 21, 2006 10:36 PM

>gerberaさん
こんばんは。
いいイラストがあって助かりました。(笑)

[2] Posted by yujiro : January 22, 2006 1:03 AM

いつも大変お世話になっております。早速画像固定のサポートありがとうございます。楽しみにしておりましたので早速カスタマイズに取り掛かりました。そこで、画像を中央に固定配置はできたのですが画像透過がどうしてもできません。よって、引用の部分から写真の部分で画像が見えなくなってしまいます。どの部分を訂正すればうまくいくのでしょうか? 何度も小粋空間様の解説を見ながら確認したのですがどぷしてもできません。お手数おかけして大変申し訳ないのですがサポートお願いします。(ちなみに使用画像は最初から透過している画像です)

[3] Posted by panser : January 22, 2006 6:18 AM

>panserさん
こんばんは。
ご質問の件ですが、スタイルシートに設定されていないようですので再度ご確認頂けますでしょうか。作業中かもしれませんが不具合が発生している状態にしておいて頂けると助かります。

以上です。
それではよろしくお願い致します。

[4] Posted by yujiro : January 23, 2006 11:33 PM

 こんにちは。先月こちらのテンプレートをお借りしたものです。知識が無いながらもこちらで勉強させていただきながらカスタマイズを試みております。
 質問させていただきたいのですが、画像をバックグラウンドに入れてbodyやエントリーを透明には出来たのですが、それだとちょっと文字が読みにくいかなと思いまして、エントリーの部分を半透明に出来ないものかと思いました。エントリーの部分を半透明にすることは可能ですか?透過指定を入れればいいのかと思ったのですが、上手く出来ませんでした。宜しければ教えてください。お願いいたします。

[5] Posted by chimamama : March 2, 2006 10:21 PM

>chimamamaさん
こんばんは。
ご返事遅くなってすいません。
エントリーを透過して背景画像を薄く表示するのエントリーを公開しましたのでそちらを参照して頂ければ幸いです(ご質問の意味をとり違えていたらすいません)。

以上です。
それではどうぞよろしくお願い致します。

[6] Posted by yujiro : March 6, 2006 1:12 AM

 もしかして変な質問したのかな?とあきらめていたのですが、久しぶりに来てびっくり!ありがとうございます。早速見ながらやってみます。

[7] Posted by chimamama : March 19, 2006 6:48 PM

>chimamamaさん
こんばんは。
コメントありがとうございます。
ということでお試しください。
ではでは!

[8] Posted by yujiro : March 21, 2006 2:24 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)