윈도우 크기가 조정될 때 가운데로 맞춘 배경 이미지의 최소 여백

CSS를 사용하여 세로 및 가로 가운데에 배경 이미지가 있습니다. 창의 크기가 배경 이미지를 표시 할 수있을만큼 커야 만 멋지게 작동합니다.윈도우 크기가 조정될 때 가운데로 맞춘 배경 이미지의 최소 여백

윈도우 크기가 bg 이미지보다 작은 경우 문제가 발생합니다. 이런 일이 발생하면 bg 이미지의 중앙 정렬이 계속되지만 대신 bg 이미지의 위쪽과 왼쪽에 최소 여백을 유지해야합니다. BG 이미지는 X 700 픽셀 900px, 그리고 내가 사용했던 코드는 다음과 같습니다

#main_wrapper { 
    background-image: url(../images/background.jpg); 
    position:relative; 
    width:900px; 
    height:700px; 
    left:50%; 
    top:50%; 
    margin-left:-450px; 
    margin-top:-350px; 
}

모든 솔루션은 윈도우가 그것을 허용 할만큼 큰 경우 수평 및 수직 BG 이미지의 중심을 계속해야하지만 것 것 창이 bg 이미지보다 짧은 경우 상단에는 최소 여백을두고 bg 이미지보다 창이 좁은 경우 왼쪽에 최소 여백을 두십시오. 어떤 도움이라도 대단히 감사하겠습니다. 감사.

출처

2012-07-12 RustyChains