Körper Hintergrundbilder leicht gemacht

html

Eine nette Funktion, die Sie auf vielen Websites finden, ist, dass der mittlere Inhaltsbereich die Seite mit einem Schlagschatten dahinter überlagert. Es ist eigentlich eine ziemlich einfache Methode, um Ihr Blog (oder eine andere Website) mit einem einzigen Hintergrundbild schön aussehen zu lassen.

Wie wird es gemacht?

  1. Finden Sie heraus, wie breit Ihr Inhalt ist. Beispiel: 750px.
  2. Erstellen Sie ein Bild in Ihrer Illustrationsanwendung (ich verwende Illustrator), das breiter als der Inhaltsbereich ist. Beispiel: 800px.
  3. Stellen Sie den Hintergrund des Bildes auf den Hintergrund ein, den Sie auf jeder Seite des Blogs haben möchten.
  4. Fügen Sie einen weißen Bereich über dem Hintergrund hinzu.
  5. Wenden Sie einen Schatten auf den weißen Bereich an, der von beiden Seiten des Bereichs extrudiert wird.
  6. Stellen Sie für den Zuschneidebereich eine Breite von 1 Pixel ein. Dadurch wird das Bild zum schnellen Rendern schön und kompakt heruntergeladen.
  7. Geben Sie das Bild aus.

So habe ich es mit Illustrator erstellt (beachten Sie, dass die Schnittfläche viel größer ist… damit Sie sehen können, was ich tue):
Hintergrund mit Illustrator

Hier ist ein Beispiel, wie die Ausgabe mit dem Hintergrundbild aussehen würde:
Beispiel für ein Hintergrundbild

So wenden Sie das Bild mit Ihrem Body-Style-Tag in Ihrem an CSS Datei.

Hintergrund: # B2B2B2 URL ('images / bg.gif') Wiederholungszentrum;

Hier ist eine Analyse des Hintergrundstil-Tags:

  • # B2B2B2 - Legt die allgemeine Hintergrundfarbe der Seite fest. In diesem Beispiel ist es grau, um mit dem Grau auf dem Hintergrundbild übereinzustimmen.
  • url ('images / bg.gif') - Legt das Hintergrundbild fest, das Sie verwenden möchten.
  • repeat-y - Legt fest, dass das Bild auf der y-Achse wiederholt wird. Das Hintergrundbild wird also von oben nach unten auf der Seite wiederholt.
  • Mitte - Legt das Bild in der Mitte der Seite fest.

Schön und einfach ... ein Bild, ein Style-Tag!

2 Kommentare

  1. 1
  2. 2

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.