[Erledigt] Frage zur Erstellung dynamischen Layouts mit CSS durch transparente Grafik
Hallo, ich hoffe ihr könnt mir weiterhelfen.
Bin gerade dabei eine Homepage aufzubauen und dazu hab ich jetzt ein Problem, das ich selber nicht lösen kann.
Mein Vorhaben als Skizze schaut ca so aus:
Es hat sich nur soweit geändert, das der Inhaltsblock nur noch linke, rechte Spalte und den Footer überlappen soll.
Ich will eine Interseite in einer höheren Ebene (z-index) über Hintergrundgrafiken legen. Ziel ist es das unabhängig von der Breite und Höhe der Seite, ein zusammenhängender Hintergrund mit Struktur vorliegt. Leider kann ich die Seite nicht passend z.B. in ein 3 Spalten-Layout legen, weil die Seite keine geraden Kanten hat und somit der Hintergrund durchscheinen muss. Ein großes zusammenhängendes Bild würde für verschiedene Breiten und Höhen sehr groß werden und lange zum laden brauchen (ca. 3-4 MB).
Hier mal eine Vorabversion:
Test-Seite
Ich hab alles probiert aber nur mit überlagerten Divs mit position:relative hats geklappt.
Da wollte ich wissen ob evtl. von euch jemand eine bessere/elegantere Lösung hätte.
Nun ist das Problem, das ich gerne, wie in der Testzeite zu sehen, die blau-eingefärbte Grafik von unten her beschränken will. Die blaue Grafik soll nur bis zur Hälfte der roten gehen. Noch verstanden?
Dadurch erhoff ich mir das sich die Struktur dynamisch der Höhe anpasst und keine unschönen Kanten entstehen.
Hier ein anderes Beispiel total vereinfacht:
Test-Seite2
Hier befindet sich ein Div mit Rahmen und eine längere Hintergrundgrafik linksbündig und oben ausgerichtet.
Wie schaffe ich es jetzt, das die Hintergrundgrafik z.B. 80px von unten nicht angezeigt wird, also transparent ist die Fläche? Habs mit padding und margin und alles mögliche probiert. Die Grafik muss aber weiterhin oben bei der Kante starten und unten abgeschnitten werden, was nicht mehr im Div angezeigt wird.
Ein weiteren Div darunter einfügen, denke ich würd nicht gehen, weil es dann mit dem Layout im Ganzen nicht funktioniert.
Edit: [Erledigt] Habe es selber hinbekommen.
Wenns interessiert: Vorläufige Version
Hallo, ich hoffe ihr könnt mir weiterhelfen.
Bin gerade dabei eine Homepage aufzubauen und dazu hab ich jetzt ein Problem, das ich selber nicht lösen kann.
Mein Vorhaben als Skizze schaut ca so aus:
Es hat sich nur soweit geändert, das der Inhaltsblock nur noch linke, rechte Spalte und den Footer überlappen soll.
Ich will eine Interseite in einer höheren Ebene (z-index) über Hintergrundgrafiken legen. Ziel ist es das unabhängig von der Breite und Höhe der Seite, ein zusammenhängender Hintergrund mit Struktur vorliegt. Leider kann ich die Seite nicht passend z.B. in ein 3 Spalten-Layout legen, weil die Seite keine geraden Kanten hat und somit der Hintergrund durchscheinen muss. Ein großes zusammenhängendes Bild würde für verschiedene Breiten und Höhen sehr groß werden und lange zum laden brauchen (ca. 3-4 MB).
Hier mal eine Vorabversion:
Test-Seite
Ich hab alles probiert aber nur mit überlagerten Divs mit position:relative hats geklappt.
Da wollte ich wissen ob evtl. von euch jemand eine bessere/elegantere Lösung hätte.
Nun ist das Problem, das ich gerne, wie in der Testzeite zu sehen, die blau-eingefärbte Grafik von unten her beschränken will. Die blaue Grafik soll nur bis zur Hälfte der roten gehen. Noch verstanden?
Dadurch erhoff ich mir das sich die Struktur dynamisch der Höhe anpasst und keine unschönen Kanten entstehen.
Hier ein anderes Beispiel total vereinfacht:
Test-Seite2
Hier befindet sich ein Div mit Rahmen und eine längere Hintergrundgrafik linksbündig und oben ausgerichtet.
Wie schaffe ich es jetzt, das die Hintergrundgrafik z.B. 80px von unten nicht angezeigt wird, also transparent ist die Fläche? Habs mit padding und margin und alles mögliche probiert. Die Grafik muss aber weiterhin oben bei der Kante starten und unten abgeschnitten werden, was nicht mehr im Div angezeigt wird.
Ein weiteren Div darunter einfügen, denke ich würd nicht gehen, weil es dann mit dem Layout im Ganzen nicht funktioniert.
Edit: [Erledigt] Habe es selber hinbekommen.
Wenns interessiert: Vorläufige Version
Zuletzt bearbeitet:
