Изображение баннера на мобильном телефоне не отвечает

Question

Оригинальный внешний вид сайта на мобильном телефоне

Теперь, когда я применяю код CSS;

div.masthead-banner.data-bg {

background-size: contain !important;

}

Я получил это, На мобильном сайте полный баннер появляется с большим количеством серого пространства над и под ним:

После применения исправления css

Однако, я бы хотел, чтобы изображение полностью заполнило элемент div, есть ли способ, которым я могу этого достичь?Спасибо.

Сайт http://naturessecrets.club

Answer 1

Лучше уменьшить высоту баннера и сделать на нем background-size: cover.

.site-title a {
  font-size: 40px;
} 
div.masthead-banner.data-bg {
    background-size: cover !important;
}

Вот оно

Answer 2

Вы можете использовать эту CSS

@media only screen and (min-width: 479px) {
    div.masthead-banner.data-bg {
        background-size: cover;
        height: 240px;
        display: flex;
        align-items: center;
    }
}

Answer 3

Вы можете установить размер фона на 100%, но это растянет вашу фотографию.

Я бы использовал разные размеры для разных устройств.Просто так:

body {
background-image: url('img_test.jpg'); }

@media only screen and (min-width: 400px) {
body { 
    background-image: url('img_test.jpg');}}