Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="profile-header">
    <div class="bg"> <img src="http://www.twoorist.com/resources/images/uploads/images/97714346f8b6a5c10d716643eee28a8e.jpg"></div>
    <div class="profile-content">
      <div class="profile-img">
        <img src="http://www.twoorist.com/resources/images/uploads/images/97714346f8b6a5c10d716643eee28a8e.jpg">
      </div>
      <div class="header-content">
        <h2>John Doe</h2>
      </div>
    </div>
  </div>
  <p>Some content down here.</p>
</body>
</html>
 
.profile-header {
  position:relative;
  display: block;
  text-align: center;
  border-bottom: #fff 1px solid;
​
  .bg {
    position: absolute;
    overflow: hidden;
    z-index: -1; 
    width: 100%; 
    height: 100%;
    opacity: 0.7;
​
    img {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      -webkit-filter: blur(15px);
      -moz-filter: blur(15px);
      -o-filter: blur(15px);
      -ms-filter: blur(15px);
      filter: blur(15px);
    }
  }
​
  .profile-content {
    z-index: 1;
  }
​
  .profile-img {
    padding: 30px 5px;
    display: block;
​
    img {
      max-width: 150px;
      margin: 0 auto;
      border-radius: 50%;
    }
  }
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers