Как реагировать на большое фоновое изображение с помощью CSS (WordPress)

Question

У меня есть большое фоновое изображение, но изображение не очень хорошо в небольшом мобильном браузере. Он отображает горизонтальную полосу прокрутки, и изображение обрезается.

Изображение должно быть:

• 3 человек в изображении должен быть дисплей в центре
• Нет полосы прокрутки

Как это исправить?

CSS (отзывчивым)

.header-home-div{ 
    background: url(/testEnvironment/files/homepage-header-mobile.jpg) !important; 
    height: 700px; 
    width: auto; 

Я пытался использовать это:

background-size: cover !important; 
background-position: center top; 

, но это не работает

Вот link

я использую this чтобы проверить отзывчивость изображения

Answer 1

По размеру мобильного телефона вы используете !important для свойства фона. Таким образом, вы должны использовать !important для установки размера тоже так:

@media screen and (max-width: 992px) 
.header-home-div { 
    height: 1500px; 
    width: auto; 
    background-size: 100% !important; 
} 

Это лучше, чтобы удалить !important свойство сначала вместо того, чтобы перезаписать его с вышеуказанным исправлением, кстати.

Горизонтальная полоса прокрутки зависит от .header-home-h1 margin. Необходимо установить следующее:

@media (max-width: 520px) 
.header-home-h1 { 
    text-align: left; 
    margin: 0; 
    width: 100%; 
    font-size: 2.25em; 
}