Absolutely Fixed Borders

by JamesKyle

HTML

<meta name="viewport" content="width=device-width">
<header>

</header>
<section class="billboard" style="background-image: url(https://www.coachup.com/assets/soccer.jpg)">
        
</section>
<article>
    
</article>
<section class="billboard" style="background-image: url(https://www.coachup.com/assets/soccer.jpg)">
        
</section>
<article>
    
</article>
<footer>
    
</footer>

CSS

body {
    z-index: 5;
}

* {
    z-index: inherit;
}

article, header {
    background: #fff;
}
article {
    height: 2000px;
}

header {
    padding: 35px 0;
}

.billboard {
    position: relative;
    height: 400px;
    z-index: -5;
    
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size:  cover;
    
    border: 0 solid #1ab7ea;
    border-top-width:    7px;
    border-bottom-width: 7px;
    box-shadow: inset 0 7px 14px -7px rgba(0,0,0,.15);
}

.billboard::before,
.billboard::after {
    content: '';
    display: block;
    position: fixed;
    z-index: 5;
    height: 21px;
    left: 0; right: 0;
    border: 0 solid #1ab7ea;
}

.billboard::before {
    top: 0;
    border-top-width: 7px;
    box-shadow: inset 0 7px 14px -7px rgba(0,0,0,.15);
}
.billboard::after {
    bottom: 0;
    border-bottom-width: 7px;
    box-shadow: inset 0 -7px 14px -7px rgba(0,0,0,.15);
}