Background image Hintergrundbild

Letzte Aktualisierung : |  

Background Image, um ein Hintergrundbild zu platzieren benötigen wir zwei HTML Tag Elemente und etwas CSS. Ein Element sollte mit position relative versehen werden und das innen liegende sollte mit position absolute versehen werden. Doch das würde nicht reichen um z.B. ein Text noch zu platzieren so das dieser gut lesbar ist.

Die Lesbarkeit würde sich vom Hintergrundbild zu Hintergrundbild unterscheiden und bei einem wäre es gut lesbar bei einem anderen wiederum nicht. Deshalb benötigt man meistens auch eine Überlagerung um den Text besser lesbar zu machen.

TEXT

Und so könnte das ganze dann aussehen, das Bild wurde überlagert mit einem RGBa Wert so wie einem z-index und der Text wurde eben so mit einem z-index hervorgehoben.



HTML Bild einfügen

Ein Bild kann man per CSS einbinden oder auch mit einem HTML Tag, natürlich auch über andere Wege wie SVG oder auch als Blob. Hier halten wir es aber einfach und machen es auf zwei Wege, zuerst mit einem HTML img Tag und weiter unten im Beispiel mit background-image.

// HTML CODE
     0  <img src="path/to/image" alt="Alternativ Text" title="Titel Text"> 

    Bilder mit kommerziellem Nutzungsrecht kannst du auf jeglichen Plattformen herunterladen wie z.B.  Pixabay oder direkt per URL einbinden mit Blind Bildern in der Entwicklung  Lorempixel



    Hintergrundbild mit Text

    Wie bereits erwähnt wenn wir Text noch auf dem Bild oder etwas anderes platzieren möchte dann benötigen wir noch den z-index. Das oben gezeigte Beispiel wurde mit folgendem HTML und CSS erstellt.

    // CSS CODE
       0  .wrapper {  1    2      position: relative;  3      width: 80%;  4      height: 300px;  5      margin: 0 auto;  6  }  7    8  .text {  9    10      position: absolute;  11      left: 50%;  12      top: 50%;  13      z-index: 2;  14      color: #fff;  15      transform: translate(-50%,-50%);  16      font-size: 3rem;  17  }  18    19  .image {  20    21      position: absolute;  22      left: 0;  23      top: 0;  24      width: 100%;  25      height: 100%;  26      background-image: url("home.jpg");  27      background-position: center center;  28      background-size: cover;  29  }  30    31  .overlay {  32    33      position: absolute;  34      left: 0;  35      top: 0;  36      z-index: 1;  37      content: '';  38      width: 100%;  39      height: 100%;  40      background-color: rgba(0,0,0,.5);  41  } 

      // HTML CODE
         0  <div class="wrapper">  1      <div class="text">TEXT</div>  2      <div class="image"></div>  3      <div class="overlay"></div>  4  </div> 

        Man kann jegliche Elemente so auf einem platzieren, es kommt ganz darauf an was man genau vor hat.

        Anzeige

        Dein Kommentar

        * Diese Felder sind erforderlich, E-Mails werden nicht veröffentlicht
        ?

        Dieses Feld ist optional
        Fülle dieses Feld aus und verbinde Dein Namen mit Deiner Website.

        Die in dieses Kontaktformular eingegebenen Daten werden in unserem System gespeichert, um die Ausgabe des Kommentars sicherzustellen. Ihre E-Mail-Adresse wird gespeichert, um die Anzahl der Kommentare und die zukünftige Registrierung zu bestimmen

        Ich habe gelesen die Datenschutzbestimmungen und Nutzungsbedingungen. Ich bestätige die Übermittlung des Formulars und die Übermittlung meiner Daten.
        tnado © 2019 | Alle Rechte Vorbehalten
        In Zusammenarbeit mit Hyperly