Hintergrundbilder

[kubjo]

Hi Leute,
wie verwirklicht ihr im Prinzip Webseiten die Ganzseitige Hintergrundbilder verwenden.
Ich kenne natürlich die entsprechenden HTML/CSS Anweisungen.
Es wird aber spannend, wenn das Hintergrundbild mit dem normalen Ihnalt der Seite korrespondieren soll, bzw. wenn der Inhalt bestimmte Stellen des Hintergrundbildes nicht überdecken soll.
Hattet ihr schon mal diese Anforderungen, und wie habt ihr das prinzipiell gelöst?

Grüße
Jochen

[lucina]

So ganz verstehe ich Deine Frage nicht - da gilt ja IMHO grundsätzlich "Augen auf bei der Bilderwahl", wenn man Text/Bild-Überlagerungen responsiv machen möchte.

Man kann Hintergrundbilder mittels 'background-position' so legen, dass anderer Content nicht in die Quere kommt. Das geht auch per Zuordnung von CSS-Klassen.

Man kann möglicherweise Schriftfarben mittels CSS-Filter an die Bildfarben anpassen (oder auch komplementär gestalten).

Ich finde es meistens auch eine gute Idee, Bildwelten gemeinsam mit dem Kunden auf bestimmte Positionen festzulegen, mögliche Ausschnitte vorab zu bestimmen und Bildmaterial dann auch daraufhin erst zu produzieren bzw. produzieren zu lassen.

Insofern sehe ich da keine generelle Vorgehensweise, aber sicher eine Reihe bedenkenswerter Punkte.

[dazzle89]

Ich benutze in solchen Fällen gerne "background-position: cover" und setze die Höhe der Seite auf 100% bzw. 100vh. So passt sich der Hintergrund schon meistens ganz gut an die Bildschirmgröße und das Format an. Wenn dann einige Inhalte nicht mehr so gut zu erkennen sind oder unpassend positioniert sind, helfe ich mit vielen Media Queries nach. Eventuell auch mit Media Queries um zwischen Portrait und Landscape zu entscheiden (also Hochkant und "Querkant").

[tintifax]

Ich gehe mal davon aus, dass das Hintergrundbild fixed sein soll.
Denk dran, dass background-attachment:fixed nicht auf allen mobilen Browsern funktioniert.
Du könntest das Hintergrundbild zerschneiden und teilweise mit z-index im Vordergrund halten, damit nicht drüber gescrolled und an unpassender Stelle gestoppt werden kann, wenn Text über ganze Breite gehen sollte.
Oder je nach Scrollposition kannst Du auch die Textblöcke mit jquery ein oder ausfaden.

Prinzipiell halte ich solche Wünsche in Zeiten des Responsive Webdesigns immer für ein bisserl Quatsch. Eine Website ist KEIN Printprodukt.
Wenn allerdings das Budget für den Mehraufwand vorhanden ist, dann freu Dich, da gibts zwischen Smartphone bis SmartTV genug zu bedenken und anzupassen

Und wie schon Lucina schrieb: lass Dir für jeden MediaQuery die Position des Textes absegnen...