Div의 div, 배경 크기 조정이 작동하지 않습니다 (시차 효과 사용)?

Question

처음에는 내 영어로 유감 :-)

블로그를 완전히 재 설계하려고합니다. 응답 성이 있어야하며 필자는 머리글에 시차 효과를 통합하려고합니다 (그 이유는 그림을 배경으로 사용하고 이미지 태그로 사용하지 않는 이유입니다). Parallax는 이미 작동하지만 두 번째 레이어 인 "header-title"에 문제가 있습니다. 창 크기를 조정하면 머리글 배경의 너비와 높이가 자동으로 조정되지만 "머리글 제목"계층은 자동으로 조정되지 않습니다. 여기

당신은 문제 볼 수 있습니다 http://jsfiddle.net/utkcT/

<div id="header" data-type="background" data-speed="10"> 
    <div id="header-title"> 
     Dieser Text ist zentriert! 
    </div> 
</div> 

    #header{ 
    width:100%; 
    height:500px; 
    background-attachment:fixed; 
    background-image: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/411/cache/northern-lights-picture-aurora-borealis-september-2011-yukon_41173_600x450.jpg"); 
    background-repeat:no-repeat no-repeat; 
    background-size: contain; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    } 

#header-title{ 
    background: -moz-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.2)); 
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.2)); 
    width:100%; 
    height:500px; 
    padding-top:25%; 
    color:#fff; 
    text-align:center; 
    } 

     $(document).ready(function(){ 

    $(window).on('resize', function(){ 
     $('#header-title').height($('#header').height()); 
    }); 


    // ---------------PARALLAX FUNCTION ------------------------  

    $('data-type="background"').each(function(){ 
     var $bgobj = $(this); // assigning the object 

     $(window).scroll(function() { 
      var yPos = -($window.scrollTop()/$bgobj.data('speed')); 

      // Put together our final background position 
      var coords = '50% '+ yPos + 'px'; 

      // Move the background 
      $bgobj.css({ backgroundPosition: coords }); 
     }); 
    }); 


}); 

당신이 보는 바와 같이 자바 스크립트/JQuery와 함께 그것을 해결하기 위해 이미 시도

,하지만 "헤더 제목이"의 내부에 있기 때문에 작동하지 않습니다 " 헤더 "태그.

제안 해 주셔서 감사합니다.

Answer 1

좋아, 내가 완전히 이해했는지는 모르겠지만 여기에 그걸 쐈어.

내가 처음으로 지정한 이미지가 변경되었으므로 URL이 600px (450px)라고 생각하여 속임수를 썼습니다.

하지만 실제로는 600px, 404px로 표시되므로 어쨌든 이미지가 바뀝니다. 내가 한 일은 다음과 같이 바뀌 었습니다.

머리글 제목 - 100 %의 상대적으로 위치한 div입니다. 이 div 내에서 투명한 이미지를 넣었습니다.이 이미지는 12px 크기로 9px이므로 펼쳐지면 650px, 배경 이미지 당 450px가됩니다. 이미지를 변경하면 투명 스페이서를 업데이트해야합니다.

이 스페이서를 확대하면 높이가 배경과 동일하게됩니다. 따라서 div의 높이를 설정할 필요가 없습니다.

내에서 div를 텍스트 주위에 싸서 머리글 제목 div 내에 절대적으로 배치했습니다.

<div id="header" data-type="background" data-speed="10"> 
    <div id="header-title"> 
     <img src="http://i59.tinypic.com/2qcnwn9.png" id="spacer-img" /> 
     <div id="header-text">Dieser Text ist zentriert!</div> 
    </div> 
</div> 


#header{ 
    width:100%; 
    background-attachment:fixed; 
    background-image: url("http://www.reactive.com/Media/images/hero-ripcurl-01-2615749e-fba2-47da-abc7-d0ea3a9ecfbd-0-600x450.jpg"); 
    background-repeat:no-repeat no-repeat; 
background-size:100%; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
} 

#spacer-img{ 
    width:100%; 
    display:block; 
} 

#header-text{ 
    position:absolute; 
    margin-top:25%; 
    width:100%; 
    top:0; 
    color:#fff; 
    text-align:center; 
} 


#header-title{ 
    background: -moz-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.2)); 
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.2)); 
    width:100%; 
    position:relative; 
} 

는 여기를 참조하십시오

http://jsfiddle.net/utkcT/2/ 잘하면 그건 당신이 달성하기 위해 찾고있는 것입니다.