忍者ブログ

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

背景に固定画像を入れて透過フィルターをかける方法メモ

ステップ1

bodyタグ直下にこんな感じでdivを入れておく。 

<div id="background-image"></div>

ステップ2

CSSタグを追加する。 

#background-image {
  background: url(http://blog.cnobi.jp/v1/blog/user/d3a05ff5bbe5cca991b42eb152f0b5fb/1339390586) center center fixed;
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  filter:alpha(opacity=40);
  -moz-opacity: 0.4;
  opacity: 0.4;
}
※画像URLと透過率（opacity）は適宜修正してくださいな。

PR