Как сделать фоновое изображение адаптивным для мобильных устройств

Question

Я делаю сайт с использованием HTML и CSS, но мое фоновое изображение не отвечает для небольших устройств, таких как мобильные, размер не меняется, так как я уменьшаю размер окон мой код CSS для изображения выглядит так:

body{
    background-image: url(image.jpg);
    background-size: cover;
    border-image-repeat: no-repeat;
}

Answer 1

Вы можете использовать одно и то же изображение для масштабирования в зависимости от размера окна браузера:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Answer 2

/ * используется, когда размер браузера или экрана меньше 767px * /

@media only screen and (max-width: 767px) {
        body{
            background: url(image.jpg)no-repeat;
            background-size: cover;
            background-position: center; 
        }
    }

Answer 3

Вам нужно посмотреть на media queries, они используются в css для определения определенных размеров экрана. Я рекомендую посмотреть здесь: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Я бы также рекомендовал для изображений иметь их в нескольких размерах, вы не хотите помещать большое изображение на холст мобильного размера, вы должны разделить их на мобильные / планшетные / настольные компьютеры

@media only screen and (max-width: 768px) {
/* For mobile phones: */
    body {
        background-image: url(mobile_image.jpg);
        background-size: cover;
        border-image-repeat: no-repeat;
    }
}