A CodePen by Lenny Sirivong. Box shadow behind adjacent background image - Demonstrates fix to issue where header has a box shadow, and the background of the content after it hides the box shadow. position: relative; is all that is needed.

index.haml

.header
  Welcome!
.main
  .content
    %p
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam vitae ante ullamcorper elementum. Nunc lacinia dictum dui, sit amet fringilla risus rhoncus id. Vestibulum sit amet lorem elit. Ut fringilla magna vitae orci adipiscing feugiat. Morbi volutpat feugiat congue. Ut sodales bibendum lacus at congue. Ut dapibus auctor elementum. Vestibulum risus enim, malesuada in sollicitudin a, pretium id neque. Phasellus mauris magna, sodales sed laoreet lobortis, placerat ut magna.
    %p
      Sed cursus elementum arcu ut tincidunt. Vestibulum lorem magna, commodo quis congue ut, suscipit sit amet libero. Nunc faucibus nisl nec dui imperdiet vitae fermentum eros tincidunt. Duis nisl leo, lacinia a porttitor et, volutpat quis tortor. Duis consectetur rutrum ligula interdum gravida. Curabitur eget mi tortor, eu tristique tortor. Integer ullamcorper adipiscing lacus blandit accumsan. Curabitur sapien tellus, volutpat quis facilisis a, lobortis in urna. Maecenas ut convallis magna. Donec adipiscing accumsan felis, eget semper lectus placerat a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    %p
      Aenean sodales sem et leo luctus euismod. Nam at rhoncus nisl. In varius ante ut purus facilisis fermentum a et augue. Vivamus tellus nunc, eleifend et suscipit vel, ornare vitae nisi. Suspendisse sollicitudin, orci nec vehicula cursus, odio ipsum elementum justo, sed fringilla sapien turpis eu turpis. Nulla gravida orci eget eros pellentesque vitae mattis ligula egestas. Donec id tincidunt felis. Cras mi arcu, pretium ac dapibus a, sollicitudin vestibulum sapien. Suspendisse consequat tortor nec metus pellentesque nec bibendum lectus scelerisque. Nullam sollicitudin pharetra lacus a cursus. Vivamus nec quam mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris eu elit at lectus tristique gravida. Proin a nisl nisi. In hac habitasse platea dictumst.
    %p
      Etiam tincidunt nisi at ante euismod ut sollicitudin erat dapibus. Curabitur mauris dolor, cursus sit amet tincidunt a, lobortis ut libero. Cras ut erat magna, at feugiat ante. Phasellus hendrerit vehicula nunc eu facilisis. Pellentesque convallis arcu eget quam adipiscing tincidunt. Vestibulum a justo lorem. Cras in magna sem, sed commodo elit. Suspendisse euismod porttitor dui sed porttitor. Donec hendrerit orci vitae orci pharetra tincidunt. Ut non risus lorem, ut vulputate erat. Morbi eget lorem vel justo porta rhoncus. Aliquam ac nisl eros, et laoreet velit.
    %p
      Fusce in nunc vitae urna feugiat consequat non vitae enim. Praesent vel nisl ipsum. Donec id enim ipsum, sit amet dapibus tellus. Praesent a odio quis orci tristique fermentum quis sed diam. In tellus lectus, tristique non dignissim ut, sagittis quis nibh. Nam vehicula auctor viverra. Nulla facilisi. Integer vel velit vitae tortor malesuada consequat. In hac habitasse platea dictumst. Aenean cursus rhoncus lacinia. Nunc mattis lorem vel magna tristique sit amet cursus nibh volutpat. Duis in orci purus, id semper arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed quam risus, ac consectetur risus.
.footer
  K Thanks Bye!

style.scss

@import "compass";
.header, .footer {
  
  /* Here's the fix! */
  /*
  
  position: relative;
  
  */
  
  
  box-shadow: 0 0 10px #000;
  
  /* some styling */
  padding: 1em 0;
  text-align: center;
}

.content {
  width: 37em;
  margin: 0 auto;
}
p {
  margin: 1em 0;
}
.nav {
  font-size: 0;
  text-align: center;
}
.main {
  .content {
    background: #0f6;
    padding: .1px 0; // remove margin collapse
  }
}