Выровнять / позиционировать фон изображения заголовка правильно

Question

В настоящее время я работаю над сайтом, и у меня возникла проблема с выравниванием / позиционированием фонового изображения в основной области заголовка.

Я хочу, чтобы изображение полностью отображалось там. И я хочу, чтобы это работало и при уменьшении масштаба до мобильных версий сайта.

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

Ниже мой CSS код:

.header-six .header-t {
    padding: 30px 0;
    text-align: center;
    background-image: url("/image.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

Answer 1

Вы пробовали с background-size: cover?

На w3schools определяется как:

"Изменить размер фонового изображения, чтобы покрыть весь контейнер, даже если он должен растянуть image image или обрежьте немного по одному из краев "

Рекомендуется взглянуть на страницу описания background-size, чтобы лучше понять, как правильно его использовать: https://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

.header-six .header-t {    
width: 100%;}

Это может помочь.