问当在手机和其他小屏幕上查看时，我的网站的背景图像变得不成比例

EN

/* with this, only a fraction of image is seen in phone */

header {
    background - image: -webkit - linear - gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img / hero.jpg);
    background - image: linear - gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img / hero.jpg);
    background - size: cover;
    height: 100 vh;
    background - position: center;
    background - repeat: no - repeat;
    background - attachment: fixed;
}

/* with this a grey background appears in phone screens */
header {
    background - image: -webkit - linear - gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img / hero.jpg);
    background - image: linear - gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img / hero.jpg);
    background - size: contain;
    height: 100 vh;

    background - position: center;
    background - repeat: no - repeat;
    background - attachment: fixed;
}