배경 이미지가 콘텐츠 div에 들어 가지 않음

Question

.right div 바로 아래에 배경 이미지를 넣고 싶지만 .right div 바로 위에 위치합니다. 어떻게 문제를 해결할 수 있습니까? http://codepen.io/anon/pen/Hilfd

.background-image { 
    background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/Nature-Wallpapers-2014-2.jpg"); 
    background-size: cover; 
    display: block; 
    filter: blur(5px); 
    -webkit-filter: blur(5px); 
    height: 800px; 
    position: relative; 
    left: 0; 
    right: 0; 
    z-index: 1; 
} 
.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); 
} 

Answer 1

당신은 배경 이미지 URL 후 세미콜론 누락 : 그것은 단지 누락 된 세미콜론이 아니다

.background-image { 
    background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/Nature-Wallpapers-2014-2.jpg"); 
[other rules...] 
} 

Answer 2

여기에 펜입니다. ;)

나는이 결과를 요구하고 있다고 생각 :

은 HTML 부분 :

<div class="wrap"> 
    <div class="background-image"></div>  
    <div class="right"></div> 
</div> 

CSS 스타일

.wrap { position: relative; } 
.background-image { 
    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); 
    height: auto; 
    min-height: 100%; 
    min-width: 100%; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 
.right { 
    box-sizing: border-box; 
    position: relative; 
    padding: 50px 20px; 
    width: 100%; 
    min-height: 400px; 
    max-height: auto; 
    margin-bottom: 5px; 
    background: rgba(255, 255, 255, 0.3); 
} 

끝은 여기 작업 펜입니다 : http://codepen.io/madcorp/pen/jgptv