Optionen für hinterlegte Designbilder

Du kannst fast alle Bereiche eines Designs mit einem Hintergrundbild versehen. Normalerweise solltest du aber sparsam damit umgehen. Ein Designbild soll ein Blickfang sein und den Besucher fesseln aber nicht vom Inhalt ablenken. Zu viele Bereiche mit einem Hintergrundbild lassen deine Webseite unruhig werden und anstatt eine Fokussierung auf das Wesentliche verliert der Besucher schnell den Überblick. Weniger ist hier in jedem Fall besser.

 

Wenn du einen durchsichtigen Headerbereich verwendest, kannst du zum Beispiel einfach das Hintergrundbild wie einen Header benutzen, indem du eine Streifenstruktur verwendest und die Außenbereiche deiner Webseite mit einer Farbe belegst, um das Hintergrundbild abzudecken, sodass es nur oben im Streifenbereich, wo sich der durchsichtige Header befindet, angezeigt wird. So entsteht quasi ein Headerbild, welches über die gesamte Browserbreite ausgedehnt ist. Damit die Qualität stimmt, sollte das verwendete Bild eine Breite von 2.560 und eine Höhe von 1.440 px haben. Mit diesen Abmessungen werden auch größere Monitore komplett abgedeckt. Wenn du die Außenbereiche leicht durchsichtig machst, kannst du deinem Design eine besondere Note geben.

 

Natürlich kannst du auch für die Header Bilder verwenden und wie gesagt auch für andere Bereiche. Das Gute bei page4 ist, dass du eine Vielzahl an Optionen hast, um so ein Hintergrundbild zu platzieren. Es gibt dazu drei Eingabe-Elemente und drei Dialoge zur Auswahl der Optionen.

Option 1: Die Ausrichtung deines Bildes

Was bedeutet das? Stell dir vor, du legst ein großes Foto oder Plakat auf einen Tisch. Da das Foto kleiner ist als die Tischfläche, hast du nun verschiedene Möglichkeiten, das Bild auszurichten. Folgende Optionen stehen dir zur Verfügung:

a) Du legst das Foto an die Oberkante und schiebst es dann bis zum linken Rand, sodass es in der Ecke liegt

b) Du legst das Foto an die Oberkante und richtest es dann zur Mitte aus.

c) Du legst das Foto an die Oberkante und schiebst es dann bis zum rechten Rand, sodass es in der Ecke liegt.

d) Du schiebst das Foto soweit nach unten, dass es genau in der Mitte liegt und dann schiebst du es bis zum linken Rand.

e) Du lässt es genau in der Mitte liegen.

f) Du schiebst das Foto von der Mitte zum rechten Rand.

g) Du legst es an die Unterkante und schiebst es nach links in die Ecke.

h) Du legst es an die Unterkante und schiebst es genau zur Mitte.

i) Du legst es an die Unterkante und schiebst es dann nach rechts in die Ecke.

 

Genau diese Optionen stehen dir für jedes Hintergrundbild zur Verfügung. Der "Tisch" ist immer der Bereich, den das Bild ausfüllt. Platzierst du ein Bild auf den Hintergrund, ist der gesamte Browser quasi der Tisch. Baust du das Bild in einen Headerbereich ein, der 500 px hoch und 1.000 px breit ist, dann ist das der Platz, auf dem das Bild ausgerichtet wird.

Ist das Bild größer als der Platz, weil du die Anpassung auf Originalgröße gestellt hast, dann wird immer nur ein Ausschnitt angezeigt und Teile des Bildes sind nicht sichtbar. Richtest du das Bild mittig aus, dass wird auch die Mitte des Bildes in der Mitte vom Header gezeigt und die Bildbereiche, die nicht mehr in den Bereich passen, laufen unten, oben, links und rechts aus dem Bereich raus. Deutlich wird das, wenn du das Bild an die Unterkante ausrichtest, dann siehst du den unteren Teil des Bildes und nach oben verschwindet das Bild aus dem Bereich. Umgekehrt natürlich auch.

 

Passt du das Bild dagegen so an, dass es in jedem Fall den kompletten Bereich ausfüllen soll und notfalls verzerrt dargestellt wird, dann hat die Ausrichtung keinerlei Auswirkung auf die Darstellung.

Option 2: Die Skalierung deines Bildes

Du solltest diese Option mit Bedacht wählen. Wenn du ein viel zu kleines Bild für den Hintergrund wählst und bestimmst, dass das Bild in Originalgröße angezeigt wird, dann steht verloren im Hintergrund ein Bild, ausgerichtet nach deinen Einstellungen und erfüllt wahrscheinlich nicht deine Erwartungen. Wenn du so ein kleines Bild verwendest und dann die Skalierung auf zum Beispiel Abdecken stellst, dann wird es vom System vergrößert, bis es diese Aufgabe erfüllen kann und sieht am Ende dann sehr unscharf, verpixelt und verfremdet aus, weil nicht genug Pixel vorhanden sind, um die Fläche auszufüllen. Dieser Dialog stellt Hilfetexte zur Verfügung, um dir jede einzelne Skalierung zu erklären. Klicke einfach auf das Bild, um es in der Originalgröße anzuzeigen , lies den jeweiligen Text und probiere es einfach aus.

Option 3: Die Wiederholung deines Bildes

Die Bildwiederholung solltest du nur verwenden, wenn du Kacheln benutzt, wenn also die Wiederholung deines Bildes zu einem geschlossenen Muster führt oder wenn du Spezialeffekte erzielen möchtest. Um zum Beispiel einen Verlauf zu erzeugen, reicht es aus, einen schmalen Streifen in einer Bildbearbeitungssoftware zu erzeugen, der durchaus gerade mal einen Pixel breit sein muss und diesen dann hochzuladen und die Option "horizontal" oder "vertikal" kacheln anzuschalten. Es entsteht ein sauberer Verlauf - sofern der Streifen perfekt gemacht ist - und die Dateigröße ist sehr gering. Außerdem passt sich der Verlauf dann der Breite oder Höhe an, je nachdem, ob der Streifen horizontal oder vertikal angelegt ist.

 

Die Erklärung selbst findest du wieder im Dialog neben den Icons.