Фоновое изображение не попадает под контент 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