Как увядать фоновое изображение без воздействия на дочерние элементы

Question

Я не смог реализовать решения, описанные в некоторых других сообщениях, возможно, из-за того, что я использую bootstrap3.

Вот мой код:

#ouverture .container { 
 
\t position: relative; 
 
\t opacity: 0.99; 
 
} 
 

 
#ouverture .container:before { 
 
\t content: ""; 
 
    opacity: .1; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    z-index: -1; 
 
\t background-image: url(images/index-carrousel/puzzle.jpg); 
 
\t background-size: 100px; 
 
\t background-repeat: repeat; 
 
}

\t <section id="ouverture" class="spacer"> 
 
\t \t <div class="container"> 
 
\t \t \t <p>Nous avons l'intention de développer une politique d'ouverture 
 
\t \t \t \t et de dialogue à l'intérieur de notre parti mais aussi avec les 
 
\t \t \t \t autres sensibilités qui s'exprimment à Blonay.</p> 
 
\t \t \t <p>Cela commence en vous offrant la parole, rejoignez-nous pour 
 
\t \t \t \t mettre votre pierre à l'édifice !</p> 
 
\t \t \t <p>Venez écrire la suite avec nous ...</p> 
 
\t \t </div> 
 
\t </section>

фоновое изображение не отображается, только текст появится. Когда я устанавливаю только оператор backgroup-image, все отображается, но я не очень хорошо вижу свой текст, потому что это интенсивность изображения.

Не знаю, что не так, потому что мне кажется, что я воспроизвожу приведенные здесь примеры.

Answer 1

Чтобы использовать высоту: 100% в вашем элементе :before, любые родительские контейнеры также должны быть 100% высоты. Кроме того, использование display:block ..

http://bootply.com/X2lOd2qspw