Hintergrundbild in Bootstrap-Zeile hinzufügen

Question

Ich möchte ein Hintergrundbild in voller Breite auf diesem Teil meiner Seite einfügen. Könnte mir bitte jemand sagen, welche CSS-Regel ich befolgen sollte? Denn soweit ich weiß kann man kein Hintergrundbild in eine Zeile einfügen.

dank

<header> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-12"> 
 
        <img class="img-responsive" src="img/profile.png" alt=""> 
 
        <div class="intro-text"> 
 
         <span class="name">HEADING</span> 
 
         <hr class="star-light"> 
 
         <span class="skills">TEXT</span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </header>

Answer 1

Wenn Sie ein Hintergrundbild hinzufügen möchten, ist die nicht der richtige Weg. Verwenden Sie die background-image Eigenschaft.

Bitte beachten Sie, dass Hinzufügen von Inline-Stil wird nicht empfohlen, ich habe es demonstrativ hier verwendet. Der richtige Weg, um Ihr div zu stylen, wäre, eine bestimmte Klasse oder eine ID hinzuzufügen und es in Ihren CSS-Dateien zu stylen.

In dem obigen Ausschnitt habe ich die Kurzschrift-Eigenschaft background verwendet, um die background-image festzulegen. Diese Kurzschrift erlaubt das Einstellen des Hintergrunds color, image, position, repeat, origin, clip und size in einer einzigen Deklaration. Sie müssen in dieser Reihenfolge sein. Sie können eine davon überspringen und size muss mit / vorangestellt werden.

Tipp: erinnern, ihre Reihenfolge benutze ich den Begriff procs (sollte ciprocs sein, aber procs ist leichter zu assoziieren und die Tatsache, dass die Farbe und Bild ist zunächst zwei ist auch leicht).

Answer 2

Sie können in Ihrem CSS-Datei stellen Sie die background-image: url('img.png') Eigenschaft zu definieren.

Für weitere Optionen werfen Sie einen Blick auf here.