A CodePen by Tim Pietrusky. New SoundCloud profile page header - I implemented the header of the new SoundCloud profile page, which you can [find here](https://soundcloud.com/goldpanda)

index.html

<section class="profile">
  <span class="profile--background"></span>
  
  <div class="profile--img">
    <img src="http://s.cdpn.io/1202/avatar_timpietrusky.jpg" alt="Tim Pietrusky" />
  </div>
  <div class="profile--text">
    <h1 class="profile--text__alpha">Tim Pietrusky</h1>
    <br>
    <h2 class="profile--text__alpha">Frankfurt (Main), Germany</h2>
  </div>
</section>

script.js

/**
  New SoundCloud profile page header
  
  
  I implemented the header of the new SoundCloud
  profile page, which you can find here 
  https://soundcloud.com/goldpanda
  
  # 2013 by Tim Pietrusky
  # timpietrusky.com
**/

style.scss

@import "compass";
body {
  margin:0;
}

$profile-height:255px;
$profile-img-height:200px;
$profile-childs-margin:1em 0 0 2em;

.profile {
  width:100%;
  height:$profile-height;
  
  > div {
    float:left;
    margin:$profile-childs-margin;
  }
  
  .profile--background {
    position: absolute;
    z-index:-1;
    height: 255px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:url(http://s.cdpn.io/1202/background_skyline_frankfurt_1.jpg);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
  }
  
  .profile--img {
    img {
      height:$profile-img-height;
      width:$profile-img-height;
    }
  }
  
  .profile--text {
    color:#fff;
    
    h1 {
      font-size:2.15em;
    }
    
    h2 {
      font-size:1em;
      font-weight:100;
    }
    
    .profile--text__alpha {
      display:inline-block;
      padding: 2px 5px;
      margin:0;
      font-family: "Interstate","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Garuda,Verdana,Tahoma,sans-serif;
      color: #fff;
      background-color: rgba(0,0,0,.8);
      line-height: 1.3;
    }
  }
}