Фоновое изображение переполнено из div

Question

Я хотел бы, чтобы изображение было объявлено в bg, чтобы соответствовать container-fluid, но оно переполнено. См. https://www.soundshelter.net/ для живого.

Цель состоит в том, чтобы текст был в верхней части изображения, поэтому opacity и blur могут быть применены к изображению и не влияют на текст.

Я пробовал использовать overflow:hidden;, но это игнорируется.

Редактировать: это также существует, если я удаляю фоновые изображения и вместо этого использую background-color.

<div class="container-fluid"> 
    <div class="bg"></div> 
    <div class="row hero_header"> 
     <h1>test</h1> 
    </div> 
</div> 

CSS

.bg /*this is the background image*/ 
    { 
     position: absolute; 
     z-index: -1; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     background: url("/images/record_wall_orig_two.jpg") 0px 0px; 
     background-size:cover; 
     height:100vh; 
     background-color: black; 
     -webkit-filter: blur(8px);/Chrome, Safari, Opera/
     filter: blur(8px); 



    } 

Answer 1

Вам необходимо установить положение относительно родителя ".bg" и переливом скрытой. Дайте мне знать, если это сработает для вас.

Answer 2

Проверьте и попробуйте код, указанный ниже. Надеюсь, это может помочь и дать вам представление.

HTML:

<div class="jumbotron"> 
     <div class="container"> 
     <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
     <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p> 
     </div> 
    </div> 

CSS:

.jumbotron { 
    background: url("https://static.pexels.com/photos/28209/pexels-photo-28209-large.jpg") center; 
    background-color: black; 


} 

p { 
    color: white; 
    font: bold 24px/45px Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(0, 0, 0, 0.7); 
    padding: 10px; 
} 

Рабочая fiddle.