• 画像は全部表示される
• 縦横比は維持される
• 指定した要素の縦横比と画像のアスペクト比がずれると背景が存在しない部分が出てしまう

#hoge{
    background-image: url("hoge.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
}

• 縦横比は維持される
• 指定した要素の縦横比と画像のアスペクト比がずれると背景画像が切れてしまう(画像全体が見えなくなる)

#hoge{
    background-image: url("hoge.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

• 画像は全部表示される
• 縦横比は維持されない

#hoge{
    background-image: url("hoge.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center top;
}

• 画像は切れる
• 縦横比とサイズが維持される

#hoge{
    background-image: url("hoge.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center top;
}

よくあるのが、グラデーションの背景にさらに背景画像を張り込むというもの。 CSS ではグラデーションの背景は image として扱われるので、つまり複数の背景画像を貼り付ける必要がある

#hoge{
    background-image:
        url("hoge.png"),
        linear-gradient(to right, green, blue);
    background-repeat:
        no-repeat,
        no-repeat;
    background-position-x:
        left calc(((100vw - 900) / 2) + 120px),
        left;