pcguy
Sep 17, 2016
view2568
view7
0
Goto Top

Responsives Hintergrundbild

GermanQuestionCSSDevelopment
Hallo zusammen, ich suche eine Lösung für ein responsives Hintergrundbild.

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.
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 315525

Url: https://administrator.de/contentid/315525

Printed on: April 19, 2024 at 08:04 o'clock

7 Comments
Latest comment
Goto Top
Member: michi1983
michi1983 Sep 17, 2016 at 19:25:06 (UTC)
Goto Top
Hallo,

ohne breakpoints wirst das nicht 100% hin bekommen.

Gruß
Member: pcguy
pcguy Sep 18, 2016 at 08:44:11 (UTC)
Goto Top
Hallo michi1983

Breakpoints für das Hintergrundbild oder für den Text in em?

LG
Member: michi1983
michi1983 Sep 18, 2016 at 08:46:49 (UTC)
Goto Top
Für jedes Bild auf der Website.

Gruß
Member: ribiku.sith
ribiku.sith Sep 18, 2016 updated at 11:06:52 (UTC)
Goto Top
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
Member: pcguy
pcguy Sep 18, 2016 at 16:58:54 (UTC)
Goto Top
@ 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
Member: ribiku.sith
ribiku.sith Sep 19, 2016 at 16:59:07 (UTC)
Goto Top
Bist Du damit weiter gekommen?

Grüße
Member: pcguy
pcguy Sep 20, 2016 at 19:51:25 (UTC)
Goto Top
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
GermanQuestionCSSDevelopment
Hotly discussed
AlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsjstrickerWIREGUARD VPN ON UDM PRO BEHIND FRITZBOX - HANDSHAKE DID NOT COMPLETEjstricker - 3 CommentsgleixnerdCheck of ZFW Firewallgleixnerd - 1 CommentDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment