A Pen by Siamak Mokhtari.

Fixed-Background-attachment.markdown

Fixed Background-attachment

Replacement Background-attachment with Position Fixed. Read the CSS Code and will be found.

A Pen by Siamak Mokhtari on CodePen.

License.

index.haml

<!-- Discovered by SiamakMokhtari Twitter: @sia_mac. -->
%header{:class => 'masthead'}

%section.iam
 %figure.face-people 
  %img.gravatar{:src =>'http://gravatar.com/avatar/a4673ef019dea5e2bbd56691abd7f354?s=256'}
  
 %h2 Hi, I'm <a href="http://twitter.com/sia_mac" title="Siamak's Twitter">Siamak  Mokhtari</a>.
 %p I'm passionate about Design ideas & Insterface. <br/> CO-Founder & Front-End Developer at @Fictionteam.

%footer{:class => 'bye',:copyright => '@Fictionteam'}
 There is a Trick<sup>*</sup>, You can do anything with it.<br/> * Replacement Background-attachment with Position Fixed :)

script.js

// javascript is not Required.

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
$bg:#fff;
$color:#777;
$color_link:#3C87C5;
$color_hover:#222;
$height:28rem;

/* default setup */
html, body {height: 100%;padding: 0;}
*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
p{margin:0;}
img{max-width:100%;}
::selection{color:$color_link}
::-webkit-selection{color: $color_link;}
::-moz-selection{color: $color_link;}
html {font-size: 100%;}
body{
  background:$bg;
  color:$color;
  font-family: "Roboto Slab",Arial,Times,serif;
  line-height: 1.618;
  text-align:center;
  word-spacing: -0.07em;
  letter-spacing: -.01em;
}
a{
  color: $color_link;
  text-decoration: none;
  border-bottom:.05em dotted $color_link;
&:hover{border-bottom-color:$color_hover;color:$color_hover}
}

/* important part */
header.masthead{
  min-height: $height;
  overflow: hidden;
  background-color:#333;
  position:relative;
&:after{
  content:'';
  background-image: url(https://dl.dropboxusercontent.com/s/udbntffo7tsap3w/fiction_bg.png) /*you should change it :)*/;
  position: fixed;
  background-size: 100% /* or cover */;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  width: 100%;
  height: $height;
  z-index:0;
}
}
/* These are just for design happy... */
section.iam{
  position:relative;
  z-index:1;
  background-color:$bg;
  padding:5rem 1.5rem;
  box-shadow:0 -1px 0 rgba(0, 0, 0, 0.02), 0 -1px 6px rgba(0, 0, 0, 0.02);
figure.face-people{
  width: 7em;
  height: 7rem;
  position: absolute;
  margin:-3.5em 0;
  border-radius:50%;
  box-shadow:0 0 0 .3em $bg;
  background-color:$bg;
  overflow:hidden;
  z-index: 999;
  left:50%;
  top:0;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
}
footer.bye{
  padding-bottom:2rem;
  color:#D0D0D0;
  background-color:$bg;
  position:relative;
  font-size:.8rem;
}