[AndreasB]

Moin.

Ich bin ziemlich unerfahren mit Dekoration, weil ich es selber schlicht bevorzuge.

Nun helfe ich einem Verein und bekomme einige Wünsche einer Grafikdesignerin.

Kann man - ohne gigantischen Aufwand - ein Hintergrundbild, rechtsbündig am Inhalt, innerhalb des linken margin von body und ein zweites Hintergrundbild, linksbündig am Inhalt, innerhalb des rechten margin platzieren?

Skizze:
fullsizeoutput_789.jpeg


Legende:
orange: begrenzt den Inhalt
lila: Hintergrundbild links und rechts
braun: Textur in Form eines PNG, die alles hinterlegt
grün: schmaleres Fenster/Gerät

Wesentlich dabei:

1. Die Seite soll gut skalieren.
2. Der Inhalt wird eine max-width in em haben.
3. Der Inhalt wird horizontal zentriert im body stehen
4. Wenn der Viewport die max-width erreicht hat, sollen die gesamten Ränder verschwunden sein
5. Die Hintergrundbilder (lila) müssen "an den Kanten des Inhaltes kleben bleiben", während die Ränder sich verschmälern

Man bräuchte also eigentlich sowas wie eine relative Position zum Inhalts-Element, einmal bezogen auf die linke und einmal bezogen auf die rechte Kante, außen liegend. Das gibt es nicht. Die Frage ist, ob man die Gestaltung durch geschickte Tricks dennoch realisieren kann.
(Die Angaben von background-position beziehen sich ja auf die Innenseiten des Elementes.)

Multiple Backgrounds aus CSS3 erlaubt problemlos mehr als ein Hintergrundbild anzugeben, aber das Positionierungsproblem bleibt.



Über euren Rat oder gar ein Codebeispiel (z.B. auf codepen.io) würde ich mich sehr freuen. Danke.

[MrMurphy]

Hallo

Wenn eine Webseite sich einem Grafikdesign unterordnen soll läuft etwas gewaltig schief.

Webdesigner sind es gewohnt (und können sich leider davon auch nicht lösen) mit festen Größen zu arbeiten. Seien es Visitenkarten, Büchercover, Flyer, Plakate.

Webseiten haben jedoch von Haus aus keine Abmessungen. Werden ihnen Abmessungen aufgezwungen ist dies immer zum Nachteil der Besucher. Grade in Zeiten von Smartphone und Tablet. Wobei das noch viel zu eng gegriffen ist. Es gibt inzwischen unzählig viele Bildschirmgrößen. Wobei das noch nichts über die Fenstergröße des Browsers aussagt. Andere Ausgabegeräte sind dabei überhaupt noch nicht berücksichtigt.

Grafikdesigner müssen sich also den Gegebenheiten von Webseiten anpassen und nicht umgekehrt.

Um dir konkrete Tips geben zu können sind mehr Informationen erforderlich.

Zumindest sollten alle Bilder und andere Hintergründe bekannt sein. Noch besser und sinnvoller wäre eine gesamte Beispielseite.

Die Seite soll gut skalieren.

Was verstehst du darunter? Wie sollen sich die Hintergrundbilder beim Skalieren verhalten?

Auch deine anderen Vorgaben sind recht nebulös und hören sich eher nach einem veralteten Layout an.

Gruss

MrMurphy

[AndreasB]

@MrMurphy

Bei mir rennst Du da offene Türen ein. Aber manchmal muss man sich eben einigen Gestaltungswünschen fügen.

Ich möchte dafür sorgen, dass sie keine negativen Auswirkungen für die Geschmeidigkeit haben.

Zur Frage habe ich eigentlich alles Wesentliche in dem Posting und in der Skizze deutlich gemacht.

Bei einem schmaler werdenden Viewport sind die grünen Kanten die neuen Grenzen. Irgendwann entsprechen die Viewportgrenzen den orangen.

Nochmal:
Es geht hier um eine Frage der Platzierung von background-image(s) (Lila).

Ist Dir klargeworden, welche Position ich meine?

[MrMurphy]

Hallo

Allgemein verstehe ich was du willst. Aber für eine konkrete Hilfe müsste ich die Bilder und sonstige Hintergrundgrafiken kennen.

Gruss

MrMurphy