Hallo! Wie bekomme ich ein überlagertes Hintergrundbild hin wie z.B. in diesem Shop auf der linken Seite?
Guten Morgen, um genau zu sein handelt es sich hierbei nicht um ein Hintergrundbild der eigentlichen Seite, sondern um einen absolut positionierten DIV-Container mit einem höheren z-index als der Rest der Seite und einem dafür gesetzten Hintergrundbild. Man müsste also in der index.tpl einen DIV-Container (z.b. mit der Klasse „overlay“) anlegen und diesem folgende CSS Eigenschaften geben: position:absolute; background: url(…/pfad/zur/grafik.png) no-repeat 0 0 transparent; width: entsprechende breite in px; height: entsprechende höhe in px; z-index: 9999; left: abstand von links in px; top: abstand von oben in px; Nur wichtig ist hierbei noch, dass das überlagernde Element nicht zu weit in den eigentlichen Seiteninhalt hineinragt. Sollten sich dort nämlich Elemente (Navigation, Links, etc) befinden, die der User klicken kann/soll dann sind diese nicht mehr erreichbar, weil sie ja überlagert sind. Bei dem gezeigten Shop ist das so gebaut, dass das was augenscheinlich überlappt lediglich Bestandteil des Banners „SB Schweißtechnik 40 Jahre…“ ist. Das ist natürlich auch ein Weg, es nur so aussehen zu lassen als ob. Ich hoffe, das hilft weiter! Beste Grüße!
1 „Gefällt mir“
Vielen Dank für die Antwort! Habe zwar jetzt, wenn ich ehrlich bin, nur Bahnhof verstanden, aber trotzdem danke! Das ist wirklich nett! Gibt es vielleicht irgendwo sowas wie eine Anleitung?
Schwer zu sagen welches HTML und CSS Wissen vorhanden ist aber möglicherweise hilft dieses Beispiel weiter: http://dustyreagan.com/using-css-to-absolute-position-object/