画像にグラデーションをかける

bodyのbackgroundに画像を貼り付けてグラデーションをかけてみましょう。

背景に画像とグラデーション

スタイルシートのソースは、こういう書き方になります。
まず、画像を画面全面に表示してみましょう。

cssソース

/*====参考====*/
body {
    background: url("./images/paragliding-4727377_1920.jpg");  
    background-attachment: fixed;
    background-size: cover;
    background-position: right bottom;
}

それでは見ていきましょう。

画像を読み出す

backgroundの値にパスを通して画像を読み出しています。
この画像（paragliding-4727377_1920.jpg）は1950×1100の大きな画像です。

cssソース

/*====参考====*/
    background: url("./images/paragliding-4727377_1920.jpg");

画像を固定する

縦にスクロールしても画像が動かないように、プロパティbackground-attachmentで値をfixedにして固定しています。

cssソース

/*====参考====*/
    background-attachment: fixed;

全面を覆う

次に、画像が画面全体を覆うようにプロパティbackground-sizeで値をcoverにして覆います。

cssソース

/*====参考====*/
    background-size: cover;

画像の位置を合わせる

そして、大きい画像の見た目のいいところ（この画像では人間）を画面に合わせるため、プロパティbackground-positionで値をright bottomにして画像右下と画面右下を合わせています。

cssソース

/*====参考====*/
    background-position: right bottom;

画像を固定するプロパティ

ホームページを制作していると大きな画像を画面に表示して動かないようにしたい、ということがよくあります。
そういう時にこの方法が使えます。
下の3行はセットで使いましょう。
値はいろいろあるので調べてみるのもいいでしょう。

cssソース

/*====参考====*/
    background-attachment: fixed;
    background-size: cover;
    background-position: right bottom;

グラデーションをかける

上で表示した画像にグラデーションをかけてみましょう。

画像とグラデーションの2つを重ねて表示する、という考え方です。

前回画像を複数枚配置したときは、始めに書いた画像が上に表示される、そうでしたね。
画像を2枚配置するときは画像と画像を;（セミコロン）ではなく,（コロン）で繋ぐ、そうでしたね。
画像の配置とグラデーションをまとめるとソースはこうなります。

cssソース

/*====参考====*/
body {
    background: linear-gradient(to right, rgba(243, 110, 110, 025), rgba(249, 180, 169, 0.25)),
                url("./images/paragliding-4727377_1920.jpg");  
    background-attachment: fixed;
    background-size: cover;
    background-position: right bottom;
}

画像を上にしたらグラデーションが隠れてしまいます。
ということは、グラデーションを上にするために先に書け、ということです。
そこで、先にグラデーションを書き、下の画像が透けて見えるように不透明度を0.25に設定、,で繋げて画像を配置しました。