Die einfachste, kompatibel Weg, um einen CSS3 Hintergrund zu schaffen, die zumindest ein wenig Pep hat, ist ein einzelnes Bild zu verwenden. Das rechte Bild sagt viel über Ihre Website und bietet Kontinuität zwischen den Seiten. Da dieser Ansatz Standard ist, sehen Sie es auf vielen Websites eingesetzt. Alles, was Sie wirklich wissen es ist die Eigenschaft background-image zu verwenden, wie im folgenden Verfahren gezeigt.

1. Erstellen Sie eine neue HTML5-Datei mit einem Texteditor.

2. Geben Sie den folgenden Code für die HTML-Seite.

   Die nette Katze
   Eine Seite, die eine niedliche Katze als Hintergrund hat.

3. Speichern Sie die Datei als SingleImage.HTML.

   Die Probe wird an anderen Orten erscheinen, so Namensgebung ist wichtig.

4. Erstellen Sie eine neue CSS-Datei mit einem Texteditor.

5. Geben Sie den folgenden CSS-Style-Informationen.

   body {background-image: url ( "CuteCat.jpg") - background-color: Saddle-color: SeaGreen-font-size: x-large-text-shadow: 1px 1px Gelb-}

   Dies ist die einfachste Form eines einzigen Hintergrundbild. Die Eigenschaft background-image hat eine einzige URL () Funktion mit ihm verbunden ist. Nur für den Fall der Benutzer das Bild nicht angezeigt werden kann (oder wollen), benötigen Sie eine entsprechende Hintergrundfarbe zu setzen.

   Je nach dem Bild (das Beispiel verwendet eine, die besonders schwer ist, mit zu arbeiten, wenn es darum geht, Text), müssen Sie die Textfarbe und Größe einstellen der Inhalt leicht zu lesen sind.

   Dies ist ein Ort, an dem die text-shadow Eigenschaft verwendet, kann den Unterschied zwischen Benutzer Freude und Benutzerbeschwerden machen. Verwenden Sie kontrastierenden Farben für die Schrift und Schatten, so dass die beiden arbeiten zusammen mit einer Reihe von Farben der Inhalt sichtbar gegen ein Bild zu machen.

6. Speichern Sie die Datei als SingleImage.CSS.

   Die Probe wird an anderen Orten erscheinen, so Namensgebung ist wichtig.

7. Laden Sie die Seite Singleimage.

   Sie sehen den Hintergrund. Beachten Sie, dass die Grafik beginnt in der linken oberen Ecke und wiederholt automatisch wie erforderlich, um das gesamte Fenster füllen.