Hintergrund gestalten

CSS







-Hintergrundfarbe-

„Background" steht in CSS für alle Hintergrund-Einstellungen, wie Farbe,
Bild, Position und Wiederholung.

Mit background-color bestimmst Du die Hintergrundfarbe.
html
/* BODY-Bereich */
  <body style="background-color:#c00000;">
/*  Mit roter Hintergrundfarbe. */
css
  body {background-color:#c00000;}
/*  Mit roter Hintergrundfarbe. */

-Hintergrundbild-

Mit background-image fügst Du ein Hintergrundbild hinzu.
html
/* BODY-Bereich */
   <body style="background-image: url('bilder/Dein-Bild.jpg');">
/* Gib den genauen Pfad zu Deinen Bildern an. */
css
/* CSS Datei */
 body {
       background-image: url('bilder/Dein-Bild.jpg');
      }
/* Gib den genauen Pfad zu Deinen Bildern an. */

-Hintergrund fixieren-

Mit background-attachment steuerst Du, ob der Hintergrund scrollt oder fixiert ist.
html
 /* BODY-Bereich */
 <body style="background-image:url(.../Dein Bild.jpg); background-attachment: scroll;">
background-image setzt das Hintergrundbild,
background-attachment: scroll sorgt dafür, dass das Bild beim Scrollen mitwandert.
css
 /* CSS Datei */
   body {background-image:url(.../Dein Bild.jpg); background-attachment: fixed;}
Mit background-attachment: fixed; bleibt das Hintergrundbild beim Scrollen fixiert.

-Hintergrund wiederholen-

Mit background-repeat legst Du fest, ob und wie sich das Hintergrundbild wiederholt.
html
/* BODY-Bereich */
   <body style="background-image:url(.../Dein Bild.jpg); background-repeat:no-repeat;">
/*  Das Bild wird einmal dargestellt. */
css
 /* CSS Datei */
   body {
background-image: url(.../Dein Bild.jpg);
background-repeat: no-repeat;
}
 /*  Das Bild wird einmal dargestellt. */
no-repeat: Keine Wiederholung.
repeat: Bild wird horizontal und vertikal wiederholt.
repeat-x: Bild wird nur horizontal wiederholt.
repeat-y: Bild wird nur vertikal wiederholt.

- Hintergrund positionieren-

background-position wird nur bei Hintergrundwiederholung (background-repeat) genutzt.
html
/* BODY-Bereich */
        <body style="background-image:url(.../Dein Bild.jpg); 
        background-repeat:no-repeat; background-position:50% 50%;">
/*  Mittige Ausrichtung des Bildes. */
css
/* CSS Datei */
       body {
      background-image:url(.../Dein Bild.jpg); 
      background-repeat:no-repeat; background-position:50% 50%;}
/*  Mittige Ausrichtung des Bildes. */
center → Bild wird mittig ausgerichtet.
right → Bild wird rechts ausgerichtet.
left → Bild wird left ausgerichtet.
top → Bild wird oben ausgerichtet.
bottom → Bild wird unten ausgerichtet.
Prozent → Du gibst an, wie weit vom linken und oberen Rand das Bild genau stehen soll.

Beispiel:
background-position: 50% 50%; Das Bild steht genau in der Mitte
(50% von links und 50% von oben).

Oder:
background-position: 0% 0%; Das Bild steht ganz oben links.

Oder:
background-position: 100% 100%; Das Bild steht ganz unten rechts.

Es ist besser, CSS in einer eigenen Datei oder im <style>-Bereich zu schreiben,
statt direkt im HTML-Tag mit dem style-Attribut.
So bleibt der Code übersichtlicher und einfacher zu pflegen.

Beispiel: CSS im <head>-Bereich deiner HTML-Datei
html
/* HEAD-Bereich */
</head>
<style>
body {
font-family: Verdana;
font-size: 13px;
background-image:url(.../Dein Bild.jpg); 
background-repeat:no-repeat; background-position:50% 50%;}
}
</style>
</head><body>

Das war's auch schon von mir. 😊
Verfasst am 21.Mai 2008, aktualisiert am 16.Juli 2025