배경이있는 헤더 주변의 동적 배경

배경이 다른 머리글이 있으며 왼쪽과 오른쪽이 서로 다릅니다. 헤더, 내용 및 래퍼는 모두 1065 픽셀입니다.

헤더 그래픽에서 계속되는 그래픽을 보유하고있는 또 다른 "background_wrapper"를 만들었습니다. 헤더 그래픽만큼 넓고 왼쪽과 오른쪽, 빈 공간이 다릅니다. 브라우저 윈도우가 100 % 너비 일 때 (PC 화면에서)와 같이 헤더 그래픽의 끝 부분에 있어야합니다. 그러나 크기를 조정하면 크기가 작아지고 (100 % 늘 때마다) 머리글 뒤쪽으로 이동합니다.

내가 여기에 업로드 : 그것을 위해 http://bf3zone.bplaced.net/Coding/

내 코드 :

<body> 
<div id="background_addition"> 
<div id="wrapper" class="clearfix"> 
    <div id="header"> 
     <div id="logo"> 
      <a href="index.html" title="M3 Institut - Zurück zum Start"> 
       <img src="images/logo_hover.png" alt="M3 Institut - Menschen machen Märkte" class="b" /> 
       <img src="images/logo.png" alt="" class="a" /> 
      </a> 
     </div> 
     <ul class="nav"> 
      <li><a href="index.html" title="Start" class="current_page_item">Start</a></li> 
      <li><a href="">Tab 1</a></li> 
      <li><a href="">Tab 2</a></li> 
      <li><a href="">Tab 3</a></li> 
      <li><a href="">Tab 4</a></li> 
      <li><a href="">Tab 5</a></li> 
      <li><a href="">Tab 6</a></li> 
      <li><a href="">Blog</a></li> 
     </ul> 
    </div>

내 모든 물건을 포함하는 신체/헤더/래퍼에 대한 나의 CSS :

* { 
    margin:0; 
    padding:0; 
    } 

html, body { 
    display: block; 
    background: url(images/background.jpg) repeat-x; 
    font: normal 100% Arial, sans-serif; /* 16px */ 
    line-height: 140%; 
    color: #464646; 
    clear: both; 
    } 

html, body, #wrapper { 
    height: 100%; 
    margin: 0 auto; 
    } 

body > #wrapper { 
    height: auto; 
    min-height: 100%; 
    } 

#wrapper { 
    width: 1065px; 
    } 

#background_addition { 
background: url(images/wrapper.png) no-repeat center top; 
} 

#header { 
width: 1065px; 
height: 193px; 
background: url(images/header_background.png) no-repeat top left; 
}

출처

2013-04-05 ShawnWhite

솔루션 : 머리글 너비를 사용하여 몸에 최소 너비를 추가하면됩니다.

html, body { 
     min-width: 1064px; 
     }

출처

2013-04-05 09:52:39 ShawnWhite

배경이있는 헤더 주변의 동적 배경

답변

관련 문제