zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsiver Hintergrund mit :after

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.02.2016, 11:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2010
Beiträge: 19
irenehofer befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.02.2016, 11:49
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.02.2016, 11:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2010
Beiträge: 19
irenehofer befindet sich auf einem aufstrebenden Ast
Standard


Ich habe dir hier einen Screenshot, wie es aussehen soll.
Mit Zitat antworten
  #4 (permalink)  
Alt 24.02.2016, 12:06
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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");
}
Dadurch sollte die Kurve direkt über dem Bild positioniert werden und du musst nichts mehr positionieren oder ausrichten. Kannst du ja mal so in etwa ausprobieren und dann das Ergebnis posten.

Falls du das dann noch responsive haben willst, einfach bescheid sagen.
Mit Zitat antworten
  #5 (permalink)  
Alt 24.02.2016, 12:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2010
Beiträge: 19
irenehofer befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Hilfe. So wird die Kurve jetzt unter dem Bild angezeigt und nicht direkt darüber...
Mit Zitat antworten
  #6 (permalink)  
Alt 24.02.2016, 12:29
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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>
Mit Zitat antworten
  #7 (permalink)  
Alt 24.02.2016, 12:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2010
Beiträge: 19
irenehofer befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 24.02.2016, 12:38
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 24.02.2016, 12:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2010
Beiträge: 19
irenehofer befindet sich auf einem aufstrebenden Ast
Standard

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 12:51 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.02.2016, 12:58
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
after, svg

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Frage: Wie Text vor Hintergrund in einem Fenster scrollen? wbiebel CSS 2 19.08.2009 19:49
Hintergrund Yada` CSS 10 21.09.2008 18:03
Div Orientierung Leonidus CSS 22 30.05.2007 18:05
Hintergrund SPMan CSS 0 16.05.2007 09:58
Hintergrund wird im IE abgehackt lekim CSS 0 29.03.2006 15:14


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:07 Uhr.