Background image HTML Hintergrundbild

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. Wir benutzen position relative, damit schaffen wir uns einen rahmen, wo wir die innen liegenden Elemente, nur in diesen rahmen halten. Weil sonst würden die Elemente nicht im rahmen bleiben.

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.

 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öchten dann benötigen wir noch den z-index. Das oben gezeigte Beispiel wurde mit folgendem HTML und CSS erstellt.

 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  } 

 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.

Wenn dir dieser Artikel gefallen hat würde ich mich über einen Follow auf eines oder mehreren Sozialen Netzwerke freuen. Links zum teilen findest du weiter unten für diesen Artikel so wie das Kommentarfeld.