CSSだけでできる背景画像をぼかす方法！画像加工不要で超簡単！

「背景に画像を敷いてその上にテキストを載せる」というデザインにする際、画像の内容によっては目線がテキストより画像に持っていかれることがあったりします。

画像に目線が行くのが正解であればいいんですが、テキストを生かしたいときには、画像をぼかしてあげるといい効果になることもあるので、画像を加工することなくCSSだけで背景に敷いた画像をぼかす方法をご紹介します。

背景画像をCSSだけでぼかす方法

背景に画像を敷いたデザインを作る時に、その画像自体をフォトショなどで加工することなくCSSで調整できると手軽でいいんですよね。

今回紹介する方法はIEには対応してませんが、ChromeやSafariなどの主要ブラウザでは問題なく使えます。「画像をぼかす or 画像をぼかさない」の違いだけなので、まぁ問題ないことが多いと思いますが、気になるようでしたら画像自体を加工して対応するようにしてください。

汎用性が高まるように、画像の中央にテキストを配置するような実例でご紹介しますね。

画面いっぱいに画像を敷いて、その中央にテキストを載せてます。こちらは背景画像をぼかす前。

そして背景に敷いた画像をぼかしたのがこちら。

HTMLはこのようなシンプルな構造で大丈夫です。

<div class="contents-frame">
  <p>テキストがここに入ります。</p>
</div>

そして背景画像をぼかすCSSがこちら。

.contents-frame {
  background-attachment: fixed;
  background-image: url(画像のパス);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 100vh;
  width: 100%;
}
.contents-frame::before {
  background: inherit;
  content: '';
  filter: blur(5px);
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
}

テキストを中央に配置する方法

上記のCSSからは「テキストを中央に配置する」という記述を省いてます。テキストを上下左右中央寄せするには、下記の3行を追記してください。

.contents-frame {
  display: flex;
  align-items: center;
  justify-content: center;
}

最後に

背景画像を暗くする方法も便利なんですが、ぼかすのも便利ですよね。

暗くする方法と組み合わせるとより使い勝手が良いので、こちらもぜひご覧ください。