일부 div의 경우 Pseudo :: After가 작동하지만 VC Hero Section 헤더에는 포함되지 않습니다.

Question

머리글의 맨 아래에 테두리 (PNG 이미지)가 필요한 클라이언트의 사이트에서 작업하고 있습니다. 사이트 전체에 걸쳐 div. 지금까지 CSS 클래스가 .hh-border-bottom인데,이 클래스는 행에 클래스를 넣을 때 위대한 기능을하는 사이트 본문에 div에 사용 된 의사 ::after 선택기가 있습니다!

그러나이 클래스는 헤더 어디서나 작동하지 않습니다. 섹션, 행 및 열에 아무 소용이 시도해 봤습니다. 사이트에서 Visual Composer를 사용하고 있으므로 헤더 이미지는 클래스 이름에 대한 입력이없는 영웅 섹션 요소입니다.

경계 이미지가 본문 div와 다르므로 (.hh-border-header) 헤더에 대한 새 클래스를 만들려고했는데 그 중 하나가 작동하지 않습니다 (왜 그렇게 생각하는지 모르겠 음).

아이디어가 있으십니까? 그리고 내가 무엇인가를 명확하게해야한다면 알려줘.

이것은 현재 경계선이 아래쪽 테두리와 비슷하게 보이고 머리글이 어떻게 보이는지를 보여줍니다.

CSS :

.hh-border-header{ 
 
    position: relative; 
 
    z-index: 2; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png); 
 
} 
 

 
.hh-border-header::after { 
 
    height: 177px; 
 
    width: 100%; 
 
    z-index: -1; 
 
    background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png); 
 
    background-repeat-x: repeat; 
 
    background-repeat-y: no-repeat; 
 
    background-position: center; 
 
    bottom: -3px; 
 
    content:" "; 
 
    display: block; 
 
    position: absolute; 
 
}

내 VC 백 엔드에서 보이는 어떤

(헤더 만)

편집 :

Pete gave me another idea to try. Makes sense why the ::after might not work on a Hero element, so I changed it so that my header image is a background image on the row, then put text and some empty space inside the row like:

이 내 HTML은 (주 모습입니다 : 내가 비주얼 작곡가로 일하고 있어요 때문에 내 페이지 소스에서이를 잡고; 내가 생각하는 조금 남았습니다) 나를 위해

<div id="page-content" class="header-style-default page-with-vc"> 
 

 
<div class="page-holder page-layout-fullwidth"> 
 

 
<section id="header" class="vc_section vc_custom_1494884324924 vc_section-has-fill"> 
 
    <div data-vc-full-width="true" data-vc-full-width-init="false" 
 
    data-vc-stretch-content="true" 
 
    class="vc_row wpb_row vc_row-fluid header hh-border-header vc_custom_1494949886936 
 
    vc_row-has-fill vc_row-no-padding"> 
 

 
    <div class="hh-border-header wpb_column vc_column_container 
 
    vc_col-sm-12 vc_col-has-fill"> 
 

 
    <div class="vc_column-inner vc_custom_1494950070267"> 
 

 
    <div class="wpb_wrapper"> 
 

 
     <div class="vc_empty_space" style="height: 250px" > 
 

 
     <span class="vc_empty_space_inner"> 
 
     </span> 
 
     </div> 
 

 
<div class="wpb_text_column wpb_content_element "> 
 
    <div class="wpb_wrapper"> 
 
    <h1 style="text-align: center;">Overnight Camps</h1> 
 

 
    </div> 
 
</div> 
 
<div class="vc_empty_space hh-border-header" style="height: 250px" > 
 
    <span class="vc_empty_space_inner"></span> 
 
</div> 
 
</div> 
 
</div> 
 
</div></div> 
 
<div class="vc_row-full-width"></div> 
 
</section>

Answer 1

작품 나는 배경 색상을 사용합니다. 확인하여 배경 이미지의 URL의이

.hh-border-header { 
 
    display: block; 
 
    position: relative; 
 
    z-index: 2; 
 
    height: 500px; 
 
    width: 500px; 
 
    background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png); 
 
    background-color: green; 
 
} 
 

 
.hh-border-header::after { 
 
    height: 177px; 
 
    width: 100%; 
 
    z-index: 5; 
 
    background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png); 
 
    background-color: red; 
 
    background-repeat-x: repeat; 
 
    background-repeat-y: no-repeat; 
 
    background-position: center; 
 
    bottom: -3px; 
 
    content: " "; 
 
    display: block; 
 
    position: absolute; 
 
}

<div id="page-content" class="header-style-default page-with-vc"> 
 

 
    <div class="page-holder page-layout-fullwidth"> 
 

 
    <section id="header" class="vc_section vc_custom_1494884324924 vc_section-has-fill"> 
 
     <div data-vc-full-width="true" data-vc-full-width-init="false" data-vc-stretch-content="true" class="vc_row wpb_row vc_row-fluid header hh-border-header vc_custom_1494949886936 
 
    vc_row-has-fill vc_row-no-padding"> 
 

 
     <div class="hh-border-header wpb_column vc_column_container 
 
    vc_col-sm-12 vc_col-has-fill"> 
 

 
      <div class="vc_column-inner vc_custom_1494950070267"> 
 

 
      <div class="wpb_wrapper"> 
 

 
       <div class="vc_empty_space" style="height: 250px"> 
 

 
       <span class="vc_empty_space_inner"> 
 
     </span> 
 
       </div> 
 

 
       <div class="wpb_text_column wpb_content_element "> 
 
       <div class="wpb_wrapper"> 
 
        <h1 style="text-align: center;">Overnight Camps</h1> 
 

 
       </div> 
 
       </div> 
 
       <div class="vc_empty_space hh-border-header" style="height: 250px"> 
 
       <span class="vc_empty_space_inner"></span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="vc_row-full-width"></div> 
 
    </section>