CSS로 가로로 늘인 배경 이미지를 피하는 방법은 무엇입니까?

Question

이미지가있는 로그인 양식을 배경으로 만듭니다.

그것은 정상적인 화면에 잘 보이는 : 다음은 스크린 샷입니다. 나는 27 "아이맥 모니터를 열려고 할 때, 형태는 끔찍 여기

이 아이맥 모니터의 스크린 샷이다.

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; 
} 

: 여기

지금까지 내 CSS입니다 그것은 해상도를 존중 만들 수있는 방법이다 이미지가 어쩌면 뻗어? 또는 방지하는 방법?

감사합니다.

Answer 1

당신은 REM 수면 경우 ove background-size: 100% 100%; 더 이상 늘어나지 않습니다.

전체 표면적이 덮여 있는지 확인하려면이 값을 사용해야합니다.

background-size: cover; 

이렇게하면 그림이 표시되지 않을 수 있습니다. 는 전체 사진을 원하고 당신이 사용해야하는 그림의 왼쪽과 오른쪽에서 공백 괜찮다면 : 당신은 당신이 항상 중앙에 유지됩니다 그래서 이것을 사용할 수 있습니다 원하는 경우

background-size: contain; 

합니다.

background-position: center;