HgaDm.markdown

HgaDm

A Pen by Alexander Zizzo on CodePen.

License.

index.html

<div id="wrap">
  <div id="hero">
    <div id="rainbow"></div>  
  </div>
  <div id="content">
    <div class="inner">
       <h1>Content here</h1>
    </div>
  </div>
</div>

style.scss

@import "compass/css3";
body { padding:0; margin:0; background-color: #f1f0e8; }
*, *:before, *:after {
  -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
          box-sizing: border-box;
}
#hero {
  position:relative;
  z-index:0;
  background-image:url('http://i.imgur.com/AcK2jrV.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  height:1450px;
  width:100%;
  background-attachment:fixed;
  overflow-x:hidden;
  overflow-y:hidden;
}
#rainbow {
  position:absolute;
  left:0;bottom:-200px;
  z-index:10;
  width: 100%;
  height: 1000px;
  overflow-y:hidden;
  overflow-x:hidden;


  &:after {
    z-index:10;
    content:'';
    position:absolute;left:-10%;top:320px;
    width:150%;height:190px;
    background-image:url('http://i.imgur.com/Bnqh7TP.jpg');
    background-repeat: repeat-x;
    background-size: auto auto;
    background-position:0 10px;
    @include transform(rotate(-15deg));
    //background-color:#f1f0e8; 
  }
  &:before {
    z-index:1;
    content:'';
    position:absolute;left:-10%;bottom:-200px; 
    width:150%;height:700px;
    background-color:#f1f0e8;
    //background-color:red;
    @include transform(rotate(-15deg));   
  }
}
#content {
  position:relative; 
  width:100%;
  height:1100px;
  background-color:#f1f0e8;  
}