Как избежать фонового изображения, растянутого горизонтально с помощью CSS?

Question

Я создаю форму для входа с изображением в качестве фона. Вот скриншот:

Он хорошо выглядит на обычном экране. Но когда я пытаюсь открыть его на 27" ИМАК монитора, форма выглядит ужасно

Вот скриншот из ИМАКА монитора:.

Вот мой CSS до сих пор:

body.woocommerce-account #main-content { 
    background-image: url('path/to/login-background-min.png'); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    padding-top: 20px; 
    min-height: 800px; 
} 

Как избежать изображение растягивается? или, может быть, это какой-нибудь способ, чтобы сделать его уважать разрешение?

Спасибо.

Answer 1

Если вы Rem ove background-size: 100% 100%; больше не протянет.

Чтобы обеспечить покрытие всей поверхности, вы должны использовать это.

background-size: cover; 

Это может привести к тому, что часть изображения не будет отображаться. Если вы хотите всю картину и не возражаете некоторое пустое пространство слева и справа от изображения вы должны использовать это:

background-size: contain; 

Если вы хотите, вы можете использовать это, чтобы он всегда будет оставаться в центре.

background-position: center;