Trick # 216 | Dieser Beitrag beinhaltet 759 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Eine interessante Möglichkeit für hübsche Darstellungen: Lassen Sie – etwa auf einer Übersichtsseite – Bilder über einen Hintergrund hinausragen. Das ist einfacher zu machen, als man meint.
Sie benötigen für diesen Trick ein Bild mit transparentem Hintergrund. Zum Beispiel also ein PNG-File. Weiter kommt eine Divi-Sektion zum Zug. In diese fügen Sie eine Zeile mit Hintergrundfarbe ein. Definieren Sie auch die Höhe der Zeile – sie sollte ein wenig kleiner ausfallen als die Höhe des später anzuzeigenden Bildes.
Nun erstellen Sie eine zweite Divi-Zeile. In diese fügen Sie ein Bildmodul ein. Im Backend wird dies dann etwa so aussehen:
Dies ergibt zunächst folgende Darstellung auf der Live-Seite:
Lorem ipsum dolor sit amet
Damit das Bild nun auf den blauen Hintergrund zu liegen kommt und aus diesem ein Stück weit hinausragt, benötigen Sie noch eine kleine CSS-Anweisung. Diese legen Sie im Bild-Modul ab: Im Tab «Erweitert» finden Sie «Benutzedefinierte CSS». Dort fügen Sie den folgenden Code im Fenster «Hauptelement» ein:
margin-top: -230px;Die Darstellung wechselt nun auf der Live-Website:
Lorem ipsum dolor sit amet
Das war’s auch schon. Je nach Bilddimension werden Sie den Pixelwert im CSS-Code ein wenig anpassen müssen. Da wird pröbeln hilfreich sein.
Werbung
Werbung
