절대 중심의 배경 이미지

Question

o 홈페이지 애니메이션에서 중심에 위치 된 배경 이미지가 중요한 부분을 차지하는 사이트가 있습니다.

브라우저 창이 사이트 너비에 맞지 않을 때까지 배경 중심이 좋아지며, 배경색은 왼쪽 정렬됩니다.

body { 
line-height:1; 
margin:0px auto; 
padding:0px; 
background:#90a830 url(img/bg.png) no-repeat center top; 
} 

이미지 팝업이 BG 이미지의 올바른 위치에서 튀어 :

이 내 몸 코드입니다. 브라우저 창을 작게 만들면 bg가 정렬되지 않게됩니다. 배경 설정

감사

앤디

Answer 1

은 50 %로 떠나 배경 마진 왼쪽 0을 뺀 배경의 폭이 될 수 있습니다. 이렇게하면 항상 브라우저 창의 가로 가운데에 이미지의 가로 가운데가 표시됩니다.

내 JSbin 데모 here을 참조하십시오. 나는 당신의 이미지를 재사용하여 아래의 다른 예제 이미지들로 이상하게 보입니다!

CSS : 당신이 게시 코드와

body { 
    line-height:1; 
padding:0px; 
    margin-left:-575px; /* half your background image width */ 
    background:#90a830 url(http://www.apb-media.co.uk/uploads/background.jpg) 50% top; 
} 

Answer 2

는 배경 이미지는 항상 화면 중앙됩니다. 작은 화면에서는 집이 중앙 화면으로 표시되기를 원합니다. 그러나 이것은 주택이 이미지의 중심에있는 경우에만 발생할 수 있습니다. 따라서 가능한 한 내 권장 사항은 이미지의 각면에 녹색 잔디를 동일하게 배치하여 주택이 이미지의 중심에 있도록하는 것입니다. 그러면이 문제가 발생하지 않을 것입니다.

body { 
    background: url(bg.png) calc(50% + 240px) 0 no-repeat; 
} 

: 당신은 이미지와 이미지의 중심의 왼쪽에, 말을하는 집의 중심, 240 픽셀을 변경할 수없는 경우

,이 같은 뭔가 화면에 주택을 중심으로 수

또는 더 넓은 화면에서 이미지가 중앙에서 보이지 않도록하려면 작은 화면의 경우 @media 규칙을 사용할 수 있습니다.