CSS фоновое изображение, чтобы соответствовать ширине, высота должна автоматически масштабироваться пропорционально

на основе советов от https://developer.mozilla.org/en-US/docs/CSS/background-size я в конечном итоге со следующим рецептом, который работал для меня

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

Я не уверен, что вы ищете именно, но вы действительно должны проверить эти отличные сообщения в блоге, написанные Крисом Койером из CSS-Tricks:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

читать описания всех статей и посмотреть, если они то, что вы ищете.

первый отвечает на следующее вопрос:

есть ли способ сделать фоновое изображение изменяемым? Например, заполните фон веб-страницы от края до края изображением, независимо от размера окна браузера. Кроме того, он должен изменить размер больше или меньше по мере изменения окна браузера. Кроме того, убедитесь, что он сохраняет свое соотношение (не растягивается странно). Кроме того, не вызывает полосы прокрутки, просто отключается вертикально, если это необходимо. Кроме того, входит на страницу в качестве встроенного тега.

второй цель post-получить следующее, " фоновое изображение на веб-сайте, которое всегда охватывает все окно браузера. "

надеюсь, что это помогает.

попробуйте это,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

просто добавьте эту строку:

    .your-class {
        height: 100vh;
    }

vh-высота видового экрана. Это автоматически масштабируется в соответствии с окном браузера устройства.

регистрация здесь: сделать div 100% высота окна браузера

фоновое изображение не установлено идеально, тогда его css-проблема, поэтому его css-файл изменяется на код ниже

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

%; background-size: 100% 100%;"

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

Плохой Код:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

Хороший Код:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

ключом здесь является добавление этого элемента ->background-size: contain;

вот что сработало для меня:

background-size: auto 100%;

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

установка размера фона не помогает, для меня сработало следующее решение:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

он в основном обрезает изображение и делает его пригодным,background-size: contain/cover все равно не подошло.