window가 너무 작 으면 배경을 가진 div를 잘라내는 것을 방지하는 방법

Question

배경 div에 문제가 있습니다. 창 크기를 너무 많이 조정하면 브라우저가 div (배경 이미지)의 왼쪽과 위쪽을 자릅니다.

어떻게 그럴 수 있습니까? 내 index.html을

<div id='wrapper'> 
     <div id='background'></div> 
     <div id='menu'></div> 
     <div id='lang'></div> 
     <div id='content'></div> 
     <div id='contact'></div> 
    </div> 

과 CSS입니다

:

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-size: 12pt; 
    font-family: Helvetica, sans-serif; 
    text-align: center; 
    width: 100%; 
    height: 100%; 

} 

#wrapper { 
    width: 900px; 
    height: 400px; 
    position: absolute; 
    left: 15%; 
    top: 25%; 
} 

#background { 
    background-image: url('gfx/6_small.jpg'); 

    margin-left: -150px; 
    margin-top: -150px; 

     min-height: 657px; 
     min-width: 1218px; 

    z-index: -1; 
    position: absolute; 
} 

Answer 1

당신과 같이 #wrapper에 고정 픽셀 마진을 설정 한 경우 :

#wrapper { 
    width: 900px; 
    height: 400px; 
    position: absolute; 
    left: 20px; 
    top: 20px; 
} 

과 부정을 제거 margin-left 및 margin-top#background에서이 sh ould가 발생하지 않습니다.

Answer 2

추가 스프라이트 시트를 구현하여 CSS3 미디어 쿼리를 사용하여 작은 장치 (또는 작은 창)에 따라 사이트 스타일을 지정할 수 있습니다.

예를 들어 너비가 900px 미만인 브라우저의 경우 모든 것을 더 작게 스타일을 지정하고 다른 배경 이미지를 특정 요소에 적용 할 수 있습니다.

What it looks like

W3C MediaQueries

이 livetime를 업데이트하려면, 당신은 또한 response.js가 필요합니다.

Answer 3

위치 규칙이 충돌하는 것 같습니다 (즉, %와 px를 모두 사용하는 경우). 브라우저 크기가 축소되지 않는 유연하지 않은 레이아웃이 필요한 경우에는 %를 피하십시오. 이 작업을 수행하는 한 가지 방법은 모든 내용을 래퍼 div (모든 항목, 머리글, 내용 ... 등)에 넣은 다음 본문 요소에 내 디자인과 잘 어울리는 배경색을 지정하는 것입니다.