Wie man einen weißen Hintergrund auf ein Bild

Question

Hallo Jungs erstellen i mit Bootstrap 3 diesen Effekt zu erzeugen versuche:

Die schwarze Farbe ein zufälliges Bild zu sein und dann nur einen weißen Streifen auf wurden kann ich meinen Text usw.

Bisher habe ich dies gesagt:

HTML:

<div class="parallax"> 
    <div class="container"> 
    <h1> Testing </h1> 
    </div> 
</div> 

CSS

.parallax { 
    background-image: url("../img/c.jpg"); 
    min-height: 1000px; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

.container { 
    width: 800px; 
} 

aber egal was ich die Breite für den Behälter zu ändern, es kleiner ist nicht nur der Text innerhalb werden es tut.

Also wieder ich suche nur ein Hintergrundbild den ganzen Browser abdecken und dann nur einen weißen Streifen herunterkommen aber die Breite um 800px zu sein; so läßt es Lücken auf der Seite das Bild im Hintergrund sehen

Answer 1

Sie können von min-width und max-width auf Containerklasse machen. Diese ensures that when your browser is resized the sides are still visible durch Setzen der width of the container to a relative (%) value. Und die max-width limits it from extending darüber hinaus. Sie können position the container using transform property in CSS und machen eine Animation für den Container von oben kommen und seine Position auf der vertikalen Mitte der Webseite.

Soweit der Hintergrund betroffen ist, können Sie die Breite oder Höhe auf 100vw, 100vh oder sogar%, wie Sie geeignet finden. Dies ist nur eine Demonstration.

.parallax { 
 
    background-image: url("http://via.placeholder.com/300x100"); 
 
    height: 100vh; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    top: -300px; 
 
    background: white; 
 
    color: black; 
 
    min-width: 70%; 
 
    max-width: 800px; 
 
    height: 100px; 
 
    text-align: center; 
 
    animation: expand 2s linear forwards; 
 
} 
 

 
@keyframes expand { 
 
    0% {} 
 
    100% { 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    } 
 
}

<div class="parallax"> 
 
    <div class="container"> 
 
    <h1> Testing </h1> 
 
    </div> 
 
</div>

Answer 2

html

<div class="parallax"> 
    <div class="cont"> 
     hellowold 
    </div> 
</div> 

css

.parallax { 
    width: 100%; 
    height: 500px; 
    position: relative; // this is necessary 
    background: #000; 
} 
.cont { 
    position: absolute; 
    width: 100%; // for responsive it will take 100% width 
    max-width: 800px; // for bigger screen it will be max 800px 
    padding: 15px; // just for decoration 
    background: #fff; 
    box-sizing: border-box; 
    margin: 0 auto; // absoluted element center purpose 
    bottom: 0; // positioning at the bottom as per your image 
    left: 0; // absoluted element center purpose 
    right: 0;// absoluted element center purpose 
    text-align: center; // just for decoration 
}