Jumbotron Hintergrundbild nicht im Inneren des Jumbotron

Question

Ich habe ein Jumbotron mit einem Hintergrundbild und Text darüber. Ich brauchte das Hintergrundbild, um eine niedrige Deckkraft zu haben (so dass der Text oben lesbar ist), also setze ich das Hintergrundbild auf das "nachher" -Pseudo-Element, wie von einigen Beiträgen zu diesem Thema empfohlen.

Das Problem ist, dass das Hintergrundbild nicht innerhalb der Grenzen des Jumbotron Div bleibt (das tatsächliche Bild ist größer/breiter als das Jumbotron Div und ich möchte, dass der Browser die Größe ändert, um innerhalb des Jumbotrons zu bleiben - stattdessen wird das Bild in die darunter liegenden divs überlaufen.

Hier ist meine CSS:

.jumbotron{ 
    background:transparent; 
    padding-bottom: 0px; 
    margin-bottom:15px; 
} 

.jumbotron:after{ 
    background-image: url(/assets/home/jumbotron_background-14b85e94838f7e237a5318b85a67a43e1ff02276069f6e48148a58eb90767f48.jpg); 
    content: ""; 
    background-size: cover; 
    background-repeat: no-repeat; 
    opacity: 0.3; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
} 

Ich habe versucht, sowohl "Cover" und "100% 100%" für Hintergrund-Größe, und in beiden Fällen nach wie vor das Bild schwappt unter in die divs aus.

Die zugehörige HTML:

<div class="jumbotron"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 
     <h1 class="text-center">Headline Here</h1> 
     <h3 class="text-center">Secondary Headline/ Value Prop</h3> 
     <p class="text-center"> Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.</p> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="spacer-row"></div> 
<div class="col-xs-12 text-center"> 
    <%= link_to 'Get Started!', signup_or_dashboard, class: 'btn btn-xl btn-primary' %> 
</div> 
    </div> 
</div> 

Answer 1

Sie sind zwei divs Schließen fehlen, eine für die jumbotron und einen für die Container. Das kann der Grund sein, warum das Test-Center von der jumbotron

besetzt ist. Ist die position:absolute notwendig? IMO, die :after wird nicht benötigt

Answer 2

Ihr Code funktioniert nicht, weil Sie den background-image einen falschen Wert gaben.

korrekte Syntax: background-image: url('path to image');

es funktioniert.

Answer 3

Ihre CSS

.jumbotron{ 
    padding: 0; 
} 
.jumbotron img { 
    opacity: 0.3; 
    position: absolute; 
    background-size: cover; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100%; 
} 
.jumbotron .container { 
    padding: 15px; 
} 

Ihre modifizierte HTML

<div class="jumbotron"> 
    <img src="home/jumbotron_background.jpg" /> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 
     <h1 class="text-center">Headline Here</h1> 
     <h3 class="text-center">Secondary Headline/ Value Prop</h3> 
     <p class="text-center"> Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta 
    felis euismod semper. 
     </p> 
     </div> 
    </div> 

    <div class="spacer-row"></div> 
    <div class="col-xs-12 text-center"> 
    <%= link_to 'Get Started!', signup_or_dashboard, class: 'btn btn-xl btn-primary' %> 
</div> 

Answer 4

Nach viel Versuch und Irrtum, ich durch das Hinzufügen einer max-height-Eigenschaft auf den jumbotron eine Arbeitslösung erhielt: nach pseudo-Element (Die gleiche Lösung funktioniert, wenn Sie das Hintergrundbild auf ein separates div im Jumbotron legen, anstatt: nach). Also:

.jumbotron:after{ 
    background-image: url('home/jumbotron_background.jpg'); 
    content: ""; 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position: center center; 
    max-height: 540px; 
    opacity: 0.3; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 

}