배경 이미지를 만드는 방법

Question

콘텐츠 부분에 배경 이미지를 넣고 이미지 만 흐림으로 만들지 만 지금까지 실패했습니다. 이미지의 코드가 콘텐츠 div 자체 (아래 코드)에있을 때 배경 이미지가 표시되도록 관리했습니다. 다른 말로하면 이미지를위한 추가 div를 만들지 않고. 그러나이 경우, 예를 들어 filter : blur (...);를 쓰면 전체 내용이 분명 흐려집니다.

두 번째 방법은 배경 이미지 div를 만드는 것입니다. 그러나 나는 이미지 바로 아래에서 컨텐트를 누르거나 컨텐트 뒤에 이미지를 놓아서 보이지 않도록 관리했습니다.

어떻게 배경 이미지를 제안하고 내 문제를 해결하겠습니까? 내 codepen - 나는 정말 빨리 만들어

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

http://codepen.io/anon/pen/hGBjA

CSS, 난 괜찮아 희망!

뿐인 : 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; 
} 

이 의도 한대로 흐린 배경 이미지와 함께 codepen에 게재되어