2015-01-09 3 views
0

높이 : 100 %로 설정된 머리글 그림 안에 머리글 텍스트를 유지하려고 시도하고 있습니다. 웹 사이트의 높이를 줄이면 텍스트가 래퍼 밖으로 흘러 나오기 시작합니다. 텍스트가 헤더 그림 안에 머물러 있기를 원합니다. 즉, 높이를 100 %로 설정하더라도 브라우저 높이에 관계없이 텍스트를 유지할만큼 그림 크기를 늘리고 싶습니다. 나는 이미 ...높이가 100 %로 설정된 div에서 내용이 계속 흐릅니다.

당신이 무슨 뜻인지 잘 모릅니다, 여기 브라우저의 높이를 축소 해보세요 .. 나는이 문제를 해결하려면 어떻게

http://nycmultifamilyloans.com/

을 최소 높이를 설정하는 시도?

지금까지 내가 가진 :

<div id="headerwrap"> 
     <div class="container"> 
      <div class="row centered headertext"> 

       <h1>WE PROVIDE MULTIFAMILY, MIXED USE, AND COMMERCIAL MORTGAGES</h1> 
       <h2>in New York City</h2> 
        <p> 
         GEORGE O'CONNOR <br/> 
         917-805-8851<br/> 
         [email protected] 
        </p> 
      </div><!-- row --> 
     </div><!-- container --> 

    </div><!-- headerwrap --> 

    #headerwrap { 
     position: relative; 
    } 



    html, body, #headerwrap{ 
     height: 100%; 
    } 

    #headerwrap .container { 

     background: url(../img/header.jpg) no-repeat center top; 
     margin-top: -10px; 
     padding-top:20px; 
     text-align:center; 
     background-attachment: relative; 
     background-position: center center; 
     height: 100%; 
     width: 100%; 

     -webkit-background-size: 100%; 
     -moz-background-size: 100%; 
     -o-background-size: 100%; 
     background-size: 100%; 

     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 

    .headertext { 
     position: absolute; 
     top: 30%; 
     left: 0; 
    } 

감사합니다!

답변

0

멋진 사이트를 찾고 있습니다! 당신은 픽셀의 최소 높이를 지정하고자하는 경우 간단하게이 작업을 수행 :

#headerwrap { 
    position: relative; 
    min-height:450px; 
} 

당신은 아마 너무 분 - 높이 더 반응 뭔가를 할 수 있습니다.

관련 문제