Адаптивное изображение Размер фона обложки

Question

Я пытаюсь использовать изображение в качестве фона в качестве обложки.Но изображение показывает разный размер окна.Я пытался увидеть на инструмент разработчика на Chrome.На моем изображении есть кривая форма, и она выглядит по-разному для большого экрана, а также для мобильного устройства.

Я хочу показать изображение одинаково для всех размеров окна.Вот мой код CSS.

background-image:url(../wp-content/uploads/2018/06/footer-wave-img.png);
background-repeat: no-repeat;
background-size: cover ;
height:auto;

Пожалуйста, дайте мне любую идею, что я должен делать.

Answer 1

Вы можете установить свойство background-size на "100% 100%", это позволит фону быть независимым от разрешения устройства.Однако фоновое изображение будет растягиваться, чтобы охватить всю область содержимого вашего элемента.Вот для этого скрипка .Если вы хотите сохранить пропорции изображения одинаковыми, вы можете попробовать background-size: 100%; в одиночку.

Answer 2

Для нескольких сайтов, которые я создал, это было то, что я использовал для отзывчивого большого background-image

    img   {   
        height: auto; 
        width: 100%;
        background-image: url(../wp-content/uploads/2018/06/footer-wave-img.png);
        background-position: 0%, 0%, 50%, 50%;
        background-size: auto, cover;
     }