Wie kann man ein Hintergrundbild hinzufügen

Hier erfahren Sie, wie man ein Hintergrundbild zu einem HTML-Dokument mithilfe von CSS-Stilen hinzufügen und positionieren kann.

Um ein Hintergrundbild zu positionieren, verwenden Sie die folgenden CSS-Eigenschaften:

Beispiel

<!DOCTYPE html>
  <html>
   <head>
       <title>Der Titel des Dokuments</title>
       <style>
        body {
            background-image: url('https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
       </style>
    </head>
    <body>
    </body>
  </html>

Im gegebenen Beispiel ist das Hintergrundbild in der Mitte positioniert (Sie können andere Werte wie: left top; left center; left bottom; right top; right center; right bottom; usw. verwenden).

Hier gibt es einige Möglichkeiten, um ein Hintergrundbild zu positionieren:

  • Vertikal oder horizontal wiederholen
  • Keine Wiederholung
  • Ganze Seite
  1. Verwenden Sie folgende Eigenschaftswerte, um ein Hintergrundbild vertikal oder horizontal zu wiederholen.
  • repeat (das Hintergrundbild wird sowohl vertikal als auch horizontal wiederholt)
  • repeat-x (das Hintergrundbild wird nur horizontal wiederholt)
  • repeat-y (das Hintergrundbild wird nur vertikal wiederholt)

Beispiel

<!DOCTYPE html>
  <html>
   <head>
     <title>Der Titel des Dokuments</title>
     <style>
        body {background-image: 
            url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
            background-repeat: repeat-y; }       
     </style>
   </head>
   <body>
   </body>
  </html>

Im angegebenen Beispiel wird das Hintergrundbild nur vertikal wiederholt.

  1. Verwenden Sie die Eigenschaft no-repeat, um das Hintergrundbild nicht zu wiederholen (das Bild wird nur einmal angezeigt).

Beispiel

<!DOCTYPE html>
  <html>
   <head>
        <title>Der Titel des Dokuments</title>
        <style>
        body {
            background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
            background-repeat: no-repeat;}   
        </style>
   </head>
  <body>
  </body>
  </html>
  1. Um ein ganzseitiges Hintergrundbild mit CSS zu erstellen, fügen Sie dem Container ein Hintergrundbild mit der Größe 100% hinzu.

Beispiel

<!DOCTYPE html>
   <html>
     <head>
           <title>Der Titel des Dokuments</title>
           <meta name="viewport" content="width=device-width, initial-scale=1">
           <style>
                body, html {  height: 100%;margin: 0;}
                .bg {
            /* The image used */
            background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
            /* Full height */
            height: 100%;
            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;  }
            </style>
     </head>
     <body>
           <div class="bg"></div>
    </body>
  </html>

Um ein transparentes Hintergrundbild zu erhalten, verwenden Sie die Eigenschaft opacity, die die Transparenz eines Elements angibt. Nehmen Sie einen Wert von 0.0-1.0, um die Transparenz zu verringern (z. B. 0,2 ist verschwommen, 0,5 macht halbtransparent).

Beispiel

<!DOCTYPE html>
   <html>
     <head>
     <title>Der Titel des Dokuments</title>
     <style>
        img { opacity: 0.5;
            filter: alpha(opacity=50); /* For IE8 and earlier */}
     </style>
     </head>
    <body>
       <img src="https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg"
       width="300" height="150">
   </body>
  </html>

Das oben genannte Beispiel ist ein Bild mit 50% Opazität.

In IE8 und seinen früheren Versionen wird filter:alpha(opacity=x) verwendet, wo Sie einen Wert von 0 bis 100 einstellen können.