24.02.2016, 10:02
|
|||
|
|||
Responsiver Hintergrund mit :after
Auf meiner Seite möchte ich gerne unterhalb des Headers mit dem Pseudo-Element :after eine Kurve anzeigen lassen. Dazu habe ich eine svg-Datei erstellt. Diese svg-Datei soll das Bild, das darunter angezeigt wird, überlappen.
Hier habe ich meinen bisherigen Code: https://jsfiddle.net/s91gxyo4/2/ Im Moment habe ich ein margin-bottom drin. Das funktioniert aber nicht mit unterschiedlichen Bildschirmgrössen, da das Bild jeweils unterschiedliche Höhen aufweist. Gibt es da eine Möglichkeit? 
|
| Sponsored Links |
|
24.02.2016, 10:49
|
|||
|
|||
|
Ich verstehe nicht 100%-ig was du erreichen möchtest.
Soll die Kurve so über dem Bild platziert sein, dass das Bild dadurch oben nicht mehr gerade sondern kurvig wirkt? Und das ganze soll responsive sein?
|
| Sponsored Links |
|
24.02.2016, 10:57
|
|||
|
|||
 Ich habe dir hier einen Screenshot, wie es aussehen soll.
|
|
24.02.2016, 11:06
|
|||
|
|||
|
Und der Header hat inhaltlich nichts mit dem Bild zu tun, oder?
Dann würde ich es etwas anders aufbauen. Und zwar würde ich das :after auf das div mit der Klasse content anwenden und nicht beim header, mit folgenden Styles: Code:
.content::after {
content: "";
display: block;
height: 30px;
background: url("http://communicaziun.ch/stroke-grey2.svg");
}
Falls du das dann noch responsive haben willst, einfach bescheid sagen.
|
|
24.02.2016, 11:21
|
|||
|
|||
|
Danke für die Hilfe. So wird die Kurve jetzt unter dem Bild angezeigt und nicht direkt darüber...
|
|
24.02.2016, 11:29
|
|||
|
|||
|
Sorry, ich Idiot.
 Du musst dann statt ::after natürlich ::before nehmen. Stell es dir so vor: Mit before wird ein Element direkt am Anfang des Selektors eingefügt. Mit after genau am Ende. Es würde folgendem HTML entsprechen: <div class="content"> ::before <img src="wasauchimmer.jpg"> ::after </div>
|
|
24.02.2016, 11:31
|
|||
|
|||
|
aaah, perfekt
 jetzt sieht es schonmal nicht schlecht aus: jetzt fehlt noch responsive. ich nehme an, dass bild unten kann ich mit einem negativen margin-top ausgleichen?
|
|
24.02.2016, 11:38
|
|||
|
|||
|
Kommt drauf an... Ich kann es auf dem Bild nicht so gut erkennen, ist da ein Abstand zwischen? Dann kannst du es natürlich so machen, oder halt gucken, woher der Abstand kommt. Vielleicht hat das <img> margin-top oder ähnliches.
|
|
24.02.2016, 11:49
|
|||
|
|||
|
hier ein besserer screenshot.
 weisst du, wie ich das ganze nun responsive hinbekomme? jetzt ist ja noch die höhe von 30px drin. Geändert von irenehofer (24.02.2016 um 11:51 Uhr)
|
| Sponsored Links |
|
24.02.2016, 11:58
|
|||
|
|||
|
Ich glaub das könntest du machen, indem du der Kurve keine height gibst, sondern stattdessen padding-bottom mit einem % Wert. Und musst mal testen, ab wann der Wert passt. Bin mir aber nicht ganz sicher
|
| Sponsored Links |
 |
| Stichwörter |
| after, svg |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Frage: Wie Text vor Hintergrund in einem Fenster scrollen? | wbiebel | CSS | 2 | 19.08.2009 18:49 |
| Hintergrund | Yada` | CSS | 10 | 21.09.2008 17:03 |
| Div Orientierung | Leonidus | CSS | 22 | 30.05.2007 17:05 |
| Hintergrund | SPMan | CSS | 0 | 16.05.2007 08:58 |
| Hintergrund wird im IE abgehackt | lekim | CSS | 0 | 29.03.2006 14:14 |
Linear-Darstellung
