I'm currently working on a design for a profile page where the header background is a blurred version of the profile picture. However, I am facing some difficulties with the overlay in my implementation.
You can see an example of what I'm talking about here: jsbin
The problem lies in the fact that I can't seem to make the background overlay stop at the white border line as intended. The element '.bg img' seems to be taking the height and width of the body element instead of being limited to 100% of the div.profile-header element. Why is this happening?
CSS:
.profile-header {
display: block;
text-align: center;
border-bottom: #fff 1px solid;
.bg {
position: fixed;
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%;
}
}
}
HTML:
<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>