Fügen Sie ein hintergrund Bild in der Bootstrap-Reihe

Möchte ich einfügen, ein full-width background-image auf diesem Teil meiner Seite. Könnte mir bitte jemand sagen, welche css-Regel, die ich befolgen sollte? Denn soweit ich weiß, Sie nicht fügen Sie ein hintergrund Bild in einer Zeile. Dank

HTML:

    <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>

  • Wollen Sie ein <img> - tag ein Bild ein hintergrund für Überschrift und Text-Teil?
  • Ich denke, es ist nicht unwirklich, was Sie brauchen: jsfiddle.net/yym7d1ov
InformationsquelleAutor aptbs85 | 2016-02-14
  1. 14

    Wenn Sie möchten, fügen Sie ein hintergrund-Bild, <img> ist nicht der Weg zu gehen. Verwenden Sie die background-image Eigenschaft.

    <header>
  <div class="container">
    <div class="row" 
         style="background:transparent url('img/profile.png') no-repeat center center /cover">
      <div class="col-lg-12">
        <div class="intro-text">
          <span class="name">HEADING</span>
          <hr class="star-light">
          <span class="skills">TEXT</span>
        </div>
      </div>
    </div>
  </div>
</header>

    Bitte beachten Sie, dass das hinzufügen von inline-style ist nicht zu empfehlen, ich habe es demonstrative hier. Der richtige Weg, um style div wäre, eine bestimmte Klasse oder eine ID und Stil es in Ihren CSS-Dateien.

    In dem snippet oben verwendet habe ich das background Kurzschrift-Eigenschaft, um die background-image. Das Kürzel ermöglicht die Einstellung hintergrund color, image, repeat, origin, clip, position und size in eine einzige Erklärung. Sie können überspringen Sie alle von Ihnen, aber size muss vorangestellt werden, ein / und kommen direkt nach position.

    • vielleicht betrachten background-size: cover; als gut.
    • Andrei ' s-Lösung enthält die background-size Regel, aber in die kürzere version.
    InformationsquelleAutor Andrei Gheorghiu
  2. 0

    Können Sie in Ihrer css-Datei den background-image: url('img.png') Eigenschaft zu definieren.

    Weitere Optionen schauen Sie hier.

    InformationsquelleAutor OmerM25
Schreibe einen Kommentar