忍者ブログ

[PR]

×

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

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

ステップ1

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

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

ステップ2

CSSタグを追加する。

#background-image {
  background: url(http://file.template.ni-3.net/DSC_0042.jpg) 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