I can’t get it to work unless my position is set to fixed, which does not solve my problem because it fixes to the bottom of my browser window! I’ve played around with everything from the z-index positioning to various display settings and position settings.

Here’s my current CSS and HTML I grabbed from my Page Source via Chrome Dev tools with the position:fixed; that makes my border show up:

.hh-border-header {
  position: relative;
  top:0;
  background-color: red;
  left:0;
  display: block;
  width:100%;
  height:100%;
  background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png);
  z-index: 100000;
}
.hh-border-header:after{
  position: absolute;
  content: "";
  top:0;
  left:0;
  background-color: green;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png);
}
<section id="header" class="vc_section vc_custom_1495133084752 vc_section-has-fill">
  <div id="outdoor-header" 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 hh-donate-button vc_custom_1495133093093 vc_row-has-fill vc_row-no-padding">
    <div class="wpb_column vc_column_container vc_col-sm-12 vc_col-has-fill">
      <div class="vc_column-inner vc_custom_1495131494343">
        <div class="wpb_wrapper">
          <div class="vc_empty_space  vc_custom_1495114669451" style="height: 250px">
            <span class="vc_empty_space_inner"></span>
          </div>
          <div class="wpb_text_column wpb_content_element  ">
            <div class="wpb_wrapper">
              <h6 class="white-text" style="text-align: center;">Outdoor Education</h6>
            </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>

I have coding in Sass as well and uploading my compiled CSS file to my development server, so maybe that makes a difference? Maybe it’s something with Visual Composer?

Read more here: ::after pseudo element only works if position: fixed


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: