Wie Repetitive Hintergrund auf CSS3 Seiten ändern

Es gibt Situationen, in denen Sie nur eine einzige Kopie eines Hintergrundbildes auf Ihrem CSS3 Website möchten. Es kann sein, dass das Bild, das Sie verwendet haben, ist etwas, das nicht gut wiederholen oder groß genug ist, dass Sie wirklich wollen nicht wiederholt. Das folgende Verfahren zeigt eine Technik, die Sie verwenden können, um den Browser zu sagen, nur eine Kopie eines Hintergrundbild zu verwenden.

1. Öffne das BackgroundPosition.CSS Datei.

2. Ändern Sie den Körper Stil, so dass das Bild nicht wiederholen, wie hier gezeigt.

   body {background-image: url ( "CuteCat.jpg") - background-color: Saddle-color: SeaGreen-font-size: x-large-text-shadow: 1px 1px Yellow-background-position: center-background-attachment : Fest background-repeat: no-repeat-Hintergrund-size: 80% -}

   Die background-repeat-Eigenschaft auf no-repeat gesetzt, so dass der Browser nur eine Kopie angezeigt werden weiß. Denn es gibt nur eine Kopie und das Bild möglicherweise nicht die richtige Größe eine gute Präsentation zur Verfügung zu stellen, wenn der Benutzer den Browser ändert die Größe, sollten Sie auch den Hintergrund-size-Eigenschaft des Bildes automatisch zu ändern.

3. Speichern Sie die CSS-Datei als NoRepeat.CSS.

4. Öffnen Sie die Datei BackgroundPosition.HTML.

5. ändern Sie die Tag so sieht es wie folgt aus:

6. Speichern Sie die HTML-Datei als NoRepeat.HTML.

7. Laden Sie die NoRepeat Seite.

   Sie sehen den Hintergrund. Es gibt nur ein Bild in der Mitte jetzt - und wenn Sie den Browser Größe ändern, ändert die Größe des Bildes automatisch auch.