CSS: Hintergrundgrafik

Mittwoch 29. April 2020 von Torsten

Unsere Webseite soll nun eine Hintergrundgrafik bekommen und dieser Artikel beschreibt verschiedene Möglichkeiten der Gestaltung…

Beispielseite für die Experimente:

Auf der Beispielseite zu diesem Kapitel werden die Hintergrundgrafiken für Textbereich und Spalte 3 auf beide möglichen Methoden eingefügt.

  • Hintergrundgrafik scrollt (Spalte 3)
  • Hintergrundgrafik fixiert (Textbereich)

Mit folgendem CSS wird die Hintergrundgrafik fixiert:

  • background-image: url(../02_Bilder/Pfadangabe zur Grafikdatei);
  • background-attachment: fixed;

Hintergrund kacheln…:

Die Methoden um den Hintergrund zu kacheln werden auch vorgestellt:

  • background-repeat: repeat-y
  • background-repeat: repeat-x
  • background-repeat: no-repeat

Mit repeat-y wird nur vertikal gekachelt. Mit repeat-x wird nur horizontal gekachelt und mit no-repeat wird ga rnicht gekachelt…Das sollte auf der Beispielseite einfach mal ausgetestet werden.

Hintergrund positionieren:

Die Methoden um den Hintergrund zu positionieren werden auch vorgestellt:

  • background-position: top
  • background-position: right
  • background-position: bottom
  • background-position: left

Auch diese Eigenschaften und Funktionen sollten einfach mal auf der Beispielseite ausprobiert werden.

Grafik mit Zoomfaktor:

Erinnern wir uns noch an die Grafik mit Zoomfaktor? Im Artikel “Artikelgestaltung 2“ wurde die zoomfähige Grafik beschrieben…

Durch eine kleine Anpassung des Grafiklinks wurde die Grafik zoomfähig – passte sich also in der Größe der Webseite an.

  • <img src=“02_Bilder/02.png“ style=“width: 100%; max-width: 800px“ title=““ alt=““ class=“bildlinks“ />

Wenn das Browserfenster verkleinert wird, wird die zoomfähige Grafik mit-verkleinert. Eine Grafik ohne Zoom wird abgeschnitten…

Für die Hintergrundgrafik braucht es keinen weiteren Eingriff, denn die Hintergrundgrafik wird schon skaliert und passt sich der Fenstergröße des Webbrowsers an.

Responsives Webdesign:

Das einzige was unsere Webseite noch nicht ist, sie ist noch nicht “responsiv“. Die Webseite passt sich also noch nicht unterschiedlichen Geräten (Smartphone,Tablet) an. Mit dem Thema Responsives Webdesign wird sich aber erst ein späterer Artikel befassen.

Dieser Beitrag wurde erstellt am Mittwoch 29. April 2020 um 08:00 und abgelegt unter Allgemein. Kommentare zu diesen Eintrag im RSS 2.0 Feed. Sie können zum Ende springen und ein Kommentar hinterlassen. Pings sind im Augenblick nicht erlaubt.

Kommentar schreiben