Header-bg div 100 % 실제로 100 %가 아닙니다.

Question

이 문제는 header-bg div가 항상 전체 브라우저 너비가되도록하려는 것입니다.

구름이있는 배경 이미지가 있고 Ctrl + 스크롤을 사용하면 이미지가 원래 너비를 유지하고 왼쪽으로 정렬됩니다. 원본 페이지보기에서 bg는 100 % 너비가 완벽하지만 모든 화면 너비가 완벽해야합니다. 이게 가능한가, 아니면 틀린가?

을 Heres 코드 :보고에 대한

body, html { 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0;} 


#header-bg { 
    background-image:url(images/header/header-bg.jpg); 
    background-repeat:no-repeat; 
    min-width:100%; 
    width:100%; 
    margin:0; 
    position:fixed; 
    height:402px;} 

<div id="header-bg"> 
<div id="header"> 
<div id="navigation"> 
</div> 
</div> 
</div> 

감사합니다!

Answer 1

기본적으로 배경 이미지의 크기는 조정할 수 없습니다. background-size 속성은 전체 DIV를 채우기 위해 당신의 배경을 얻기 위해 사용되어야한다 : 3.6

오페라 9.5+에게

• 파이어 폭스
• 크롬 :

  #header-bg { 
      background-image: url(images/header/header-bg.jpg); 
  
      -moz-background-size: 100% 100%; 
      -o-background-size: 100% 100%; 
      -webkit-background-size: 100% 100%; 
      background-size: 100% 100%; 
      /*Other CSS*/ 
  } 
  

  이 CSS 기능이 지원됩니다 1+

• safari 3+
• Internet Explorer 9+

이 속성을 사용할 수없는 경우 유일한 나머지 옵션은 <img> 요소를 사용하는 것입니다.
바이올린 : 너무 큰 화면을 채울 수 있도록 http://jsfiddle.net/Hf79s/

<style> 
#header-bg{ 
    width:100%; 
    height: 50px; 
} 
#header-bg-img { 
    height: 100%; 
    width: 100%; 
} 
</style> 
<div id="header-bg"> 
    <img src="images/header/header-bg.jpg" id="header-bg-img" /> 
</div> 

Answer 2

당신은 그냥 배경 이미지 추가 넓은 만들 수 있습니다. 유일한 단점은 크기가 작은 화면은 전체 이미지를 볼 수 없지만 장식용 구름 일 때는 괜찮을 것입니다.

다른 해결책은 배경 크기입니다. 그러나 이것은 배경이 불균형하게 스케일되거나 이미지의 아래쪽이 잘 리게된다는 단점이 있습니다. 또한 이전 버전의 IE에서는 지원하지 않습니다.