Webページの背景画像を透かしてオシャレにしてみる

f:id:endoakak:20200727195747j:plain

Webページに背景画像を入れて、さらにちょっと透かして気取った感じにする方法です。

f:id:endoakak:20200909184400p:plain

背景画像を入れる

背景画像を入れるには、background-imageというプロパティを使います。

<div class="background-img">
</div>

.background-img {
  height: 100vh;
  background-image: url("画像の場所を指定");
}

これでひとまず画像が入りました。
下の画像は、ブラウザで表示したものをスクショしてます。

f:id:endoakak:20200909185852p:plain

ただしこのままではサイズが全然合ってません。

サイズを合わせるのに使うのが、background-sizeプロパティです。

先ほどの記述に追加します。

.background-img {
  height: 100vh;
  background-image: url("画像の場所を指定");
  background-size: cover;
}

f:id:endoakak:20200909190618p:plain

background-size: cover;で、要素の横幅に合わせて画像を表示してくれます。

ただ横幅に合わせているので、わかりづらいですが実は画像の下の方が切れてるんですよね。横ではなく縦に合わせたい時は、coverではなくcontainにします。

.background-img {
  height: 100vh;
  background-image: url("画像の場所を指定");
  background-size: contain;
}

f:id:endoakak:20200909190943p:plain

画像の全体が表示されました。

しかし足りない部分は同じ画像を繰り返し表示するので、右端の方が微妙な感じになってます。これを避けるにはbackground-repeatプロパティを使います。

.background-img {
  height: 100vh;
  background-image: url("画像の場所を指定");
  background-size: contain;
  background-repeat: no-repeat;
}

f:id:endoakak:20200909191257p:plain

これで繰り返しを避けられました。

最後に、画像を無理やり要素のサイズに合わせるには、パーセンテージを指定します。

.background-img {
  height: 100vh;
  background-image: url("画像の場所を指定");
  background-size: 100% 100%;
}

f:id:endoakak:20200909191624p:plain

画像が引き延ばされていますが、要素の大きさに合わせて表示されています。

では、画像を透かして気取った感じにする方法。これについては、もっと上手いやり方があるのかもしれないですが、私は今のところ白い要素を重ねることで作っています。

背景画像の上に同じ大きさの要素を重ねて、その要素に色を付ける、という感じです。

コードは以下のようになります。

<div class="background-img">
  <div class="background-cover">
  </div>
</div>

.background-cover {
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
}

f:id:endoakak:20200909192553p:plain

rgba()の4つ目の引数で色の透過率を設定しています。0に近いほどスケスケになり、1に近いほど透けなくなります。

0.8にするとこんな感じです。

f:id:endoakak:20200909192432p:plain

だいぶ白っぽくなりましたね。

白じゃない色を重ねてみても面白そうです。