Способы сделать фоновое изображение

Question

Я стараюсь, чтобы помещал фоновое изображение в контент div и делал только размытие изображения, но пока не удалось. Мне удалось отобразить фоновое изображение, когда код для изображения находится в самом содержимом div (код ниже). Другими словами, не создавая дополнительный div для изображения. Но в этом случае все содержимое, очевидно, становится размытым, если, например, я ставлю filter: blur (...);

Второй способ - сделать фоновое изображение div. Но мне удалось либо подтолкнуть содержимое прямо под изображение, либо поместить изображение где-то позади содержимого, чтобы оно не было видно.

Как вы можете сделать фоновое изображение и исправить мою проблему? Мой 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

Я сделал это очень быстро, я надеюсь, что это нормально!

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; 
}