Maske positionieren

[DexXxtrin]

Hallo zusammen,

Ich bin an einer Website und bin dabei auf ein Problem gestossen. Als Hintergrund verwende ich ein Muster welches endlos wiederholt wird. In der Mitte (horizontal, feste Grössen in x und y) kommt mein main-Bereich. Bei diesem soll dieses Hintergrundmuster weiter gehen, allerdings Weichgezeichnet (für bessere Leserlichkeit). Da ich ja das Weichzeichnen nicht realisieren kann (?!) hatte ich die Idee, das Hintergrundmuster einmal normal und einmal so wie es im main-Bereich sein soll abzuspeichern und dann mit einer Maske das ganze anzeigen zu lassen. Nun meine Frage: Wie kann ich sagen, wo sich die Maske positionieren soll?
Wenn jemand sonst noch eine einfachere Lösung hat, bin ich um einen Tipp nicht abgeneigt.

Grüsse,
DexXxtrin

 

[SpiceLab]

Welche Maske?! Und warum so kompliziert?

Wenn schon, dann fungiert das weichgezeichnete Musterbild direkt als Hintergrundbild des Hauptbereichs, das darin standesgemäß oben links beginnt. Bei größerer Bild-Auflösung kann jedoch mit background-position:center top der Hintergrund entsprechend im Viewport horizontal verrückt werden, damit der Musterverlauf beider Bilder exakt übereinander liegt.

 

[DexXxtrin]

Das hatte ich auch im Sinn, jedoch wenn das Browserfenster breiter oder schmäler wird, ändert sich die Position des Hauptbereichs und somit stimmt dann das Muster nicht mehr überein...

 

[SpiceLab]

Wie schon eben erläutert, wähle eine größere Dimensionierung beider Bilder (die Wiederholung des Hintergrundbilds entfällt somit) und positioniere sie wie von mir empfohlen, damit sich der Musterverlauf bei Skalierung des Browserfensters nicht zu-/gegeneinander verschiebt.

 

[DexXxtrin]

Hab was übersehen bei deinem vorherigen Post.
Werde es mal so versuchen, danke für den Tipp!