Ways to make a background image - html

Question

I am trying to put a background image in a content div and make only the image blur but failed so far. I managed to get the background-image to show up when the code for the image is in the content div itself (code below). In other words without making an additional div for the image. But in this case the whole content obviously becomes blur if, for example, I put filter: blur(...);
The second method was to make a background-image div. But I managed either to push the content right under the image or put the image somewhere behind the content so It's not visible.
How would you propose to do a background-image and fix my issue? My codepen - http://codepen.io/anon/pen/hGBjA
CSS
h2 {
font-family: Open Sans;
color: #0099F1;
padding-left: 20px;
text-align: left;
}
#bizpartners ul {
list-style-image: url ("http://www.peopletraining.co.uk/people_training_april_2012002002.jpg");
}
.right {
position: relative;
float: left;
margin-top: 50px;
width: 100%;
min-height: 400px;
max-height: auto;
z-index: 5;
margin-bottom: 5px;
background: rgba (255, 255, 255, 0.3);
border: 1px solid #000000;
background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/Nature-Wallpapers-2014-2.jpg");
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
background-repeat: no-repeat;
}
.right p {
margin-left: 30px;
margin-top: 20px;
text-align: center;
}

Answer 1

I made it really quick, i hope it's ok!
FIDDLE: http://jsfiddle.net/81yawoxg/
HTML
<div class="container">
<div class="background"></div>
<div class="text">CONTENT HERE</div>
CSS
.container{
position: relative;
width: 1280px;
height: 700px;
}
.background{
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
z-index: 100;
background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/Nature-Wallpapers-2014-2.jpg");
filter: blur(5px);
-webkit-filter: blur(5px);
background-repeat: no-repeat;
}
.text{
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
z-index: 200;
padding: 20px;
}