Cannot position background image of :before element correctly - html

Question

I am trying to achieve frosted glass effect as described here: https://css-tricks.com/frosting-glass-css-filters/. In order to do this, I need to add :before element with the same background and apply blur effect.
Here's my HTML:
<div class="root">
<div class="content">
<p>Ok hello</p>
</div>
</div>
and CSS:
.root {
background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat center center fixed;
background-size: cover;
height: 400px;
}
.content {
position: relative;
top: 50%;
transform: translateY(-50%);
background-color: red;
padding-top: 16px;
padding-bottom: 16px;
}
.content:before {
content: "";
position: absolute;
width: 100%;
top: 0;
bottom: 0;
z-index: -1;
background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat center center fixed;
background-size: cover;
opacity: 0.5;
/* -webkit-filter: blur(5px); */
}
Here's the pen: http://codepen.io/anon/pen/MKgbKR
I can't seem to position the background of :before element correctly. It is always shifted vertically. I tried playing with translation of this element, adjust the background, but to no avail. The problem can be easily noticed in the right part of the image, especially if you try resizing the resulting document vertically.
I am an absolute beginner in CSS, so I'm out of ideas. Your help will be appreciated.
EDIT: I think I should clarify my requirements. I need to keep the content block centered vertically regardless of window size changes. The image should remain centered and cover the background. The content never changes.

Answer 1

This might not show correctly on the snippet box, test it on your site and lmk
.root {
background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat center center;
background-size: cover;
height: 600px;
}
.content {
position: relative;
top: 50%;
height: 200px;
transform: translateY(-50%);
background-color: red;
}
.content:before {
content: "";
position: absolute;
width: 100%;
top: 0;
bottom: 0;
z-index: -1;
background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat center center;
background-size: cover;
opacity: 0.5;
-webkit-filter: blur(5px);
}
<div class="root">
<div class="content">
<p>Ok hello</p>
</div>
</div>