Auffüllen in div container HTML/CSS

Ich versuche, das Bild unten auf das ganze div zu machen, was bedeutet, dass das Hintergrundbild den ganzen Platz einnehmen sollte und ich die grüne Farbe nicht sehen sollte. Leider kann ich keinen Weg finden, es zu tun.Auffüllen in div container HTML/CSS

#imagecontainer { 
 
    background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat; 
 
    border: 1px solid; 
 
    background-size: cover; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="container no-padding" id="maincontent" tabindex="-1"> 
 
    <div id="imagecontainer" class="row"> 
 
    <div class="col-lg-12"> 
 
     <img class="img-responsive" src="img/profile.png" alt=""> 
 
     <div class="intro-text"> 
 
     <h1 class="name">Start Bootstrap</h1> 
 
     <h1 class="name">Start Bootstrap</h1> 
 
     <h1 class="name">Start Bootstrap</h1> 
 
     <hr class="star-light"> 
 
     <span class="skills">Web Developer - Graphic Artist - User Experience Designer</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Vielen Dank!

Quelle

2017-05-08 Alberto Carmona

ist 'width' und' height' 100%? – AvrilAlejandro

Entschuldigung für meine Ignoranz, wo meinst du das? –

Verwenden Sie container, verwenden Sie container-fluid, um die volle Breite zu erreichen. Hier ist ein demo

Quelle

2017-05-08 21:06:22 Nofel

danke für die Antwort, aber mit Container-Flüssigkeit ist das Bild geschnitten und ich möchte es vollständig sichtbar sein –

@AlbertoCarmona Ich habe meine Antwort aktualisiert. Du fehlst Höhe am Körper und ich denke, Hintergrund-Eigenschaften waren nicht in der richtigen Reihenfolge. – Nofel

das ist toll für die breite viele dank aber was passiert mit der höhe? In Ihrem Beispiel wird das Bild abgeschnitten, auch wenn ich mehr Text hinzufüge. Gibt es dafür Lösungen? Danke noch einmal! –

-1

Das #maincontent div hat eine Auffüllung, einen positiven Rand und eine Breite in Pixel; und der #imagecontainer hat eine negative Marge.

Dies liegt daran, dass Bootstrap die Elemente in seinem Grid behandelt.

Sie könnten stattdessen ein flüssiges Jumbotron verwenden, um die volle Breite zu nutzen und den nötigen vertikalen Platz für Ihren Inhalt einzunehmen.

Diese Hilfe sein könnte: https://v4-alpha.getbootstrap.com/components/jumbotron/

Quelle

2017-05-08 21:52:27

Auffüllen in div container HTML/CSS

Antwort

Verwandte Themen