7
Responsives Hintergrundbild
Hallo zusammen, ich suche eine Lösung für ein responsives Hintergrundbild.
Mein Codde bis jetzt:
Das funktioniert recht gut, aber bei einigen grössen habe ich einen Fehler:
zb bei 600x800 ist das bild nicht in 100% in der höhe.
Der Text wird trotz der Angaben in "em" bei den kleinen Versione zerschossen.
Mein Codde bis jetzt:
body {
background-image: url('http://www.xxx.ch/wp-content/uploads/2016/07/<?php echo get_the_title($post->ID);?>.jpg');
background-repeat: no-repeat;
background-position: top left ;
background-size: cover;
background-attachment: fixed;
background-color: black;
}Das funktioniert recht gut, aber bei einigen grössen habe ich einen Fehler:
zb bei 600x800 ist das bild nicht in 100% in der höhe.
Der Text wird trotz der Angaben in "em" bei den kleinen Versione zerschossen.
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 315525
Url: https://administrator.de/contentid/315525
Ausgedruckt am: 21.11.2024 um 22:11 Uhr
7 Kommentare
Neuester Kommentar
Hallo,
ohne breakpoints wirst das nicht 100% hin bekommen.
Gruß
ohne breakpoints wirst das nicht 100% hin bekommen.
Gruß
Hallo michi1983
Breakpoints für das Hintergrundbild oder für den Text in em?
LG
Breakpoints für das Hintergrundbild oder für den Text in em?
LG
Für jedes Bild auf der Website.
Gruß
Gruß
Hallo auch,
das was Du suchst ist die Einheit vh und vw, die beziehen sich auf den Viewport der Seite, funktioniert auch wunderbar mit font-size.
Font:
https://css-tricks.com/viewport-sized-typography/
Allgemein:
https://www.drweb.de/magazin/neue-css-einheiten-fuer-responsive-designs- ...
Viele Grüße,
Ribiku
Edit: Auf geparste CSS Files würde ich eher verzichten
das was Du suchst ist die Einheit vh und vw, die beziehen sich auf den Viewport der Seite, funktioniert auch wunderbar mit font-size.
Font:
https://css-tricks.com/viewport-sized-typography/
Allgemein:
https://www.drweb.de/magazin/neue-css-einheiten-fuer-responsive-designs- ...
Viele Grüße,
Ribiku
Edit: Auf geparste CSS Files würde ich eher verzichten
@ michi1983, ich habe das Template Avada auf meinem WP System. Es klappt nur nicht mit dem Hintergrundbild ....
@ribiku.sith, diese Grössenangabe sehe ich das erste mal, Danke ....das teste ich sofort ...
lg
@ribiku.sith, diese Grössenangabe sehe ich das erste mal, Danke ....das teste ich sofort ...
lg
Bist Du damit weiter gekommen?
Grüße
Grüße
ich bin noch am testen, aber bis jetzt habe ich noch kein zufriedenstellendes Ergebnis...
Die Schrift habe ich in vh, die wird aber mobile extrem klein
liebe Grüsse
Die Schrift habe ich in vh, die wird aber mobile extrem klein
liebe Grüsse
