youkantoe

CSSで複数の背景を指定する

2020 / 4 / 14

background:
  image: url('/background_movie.jpg') , linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(211,230,246,1) 100%)
  size: contain ,  cover
  position: center bottom ,  center bottom
  repeat: no-repeat ,  no-repeat

この指定だと、グラデーションの上に画像が入る

サイズやポジション、リピートも複数設定できるのでちゃんと設定しておく

最初に指定した方が上位レイヤーになる。後で指定した方が上位じゃないので注意！

参考 : https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds