Hintergrundgrafik auf mobilen Browsern

[anonym]

Liebes Forum,

ich habe ein Problem mit meiner Webseite.
Diese enthält ein Hintergrundbild. Dieses habe ich wie folgt eingefügt:

  
	background-image: url("http://meinewebseitenadresse.de/XX.jpg");  
	background-repeat:no-repeat;  
	background-size: cover;  
	background-attachment:fixed;  
  

Funktioniert sehr gut und mit Cover wiederholt sich nicht das Bild und ich habe keine Ränder.

Wenn ich jetzt aber mir die Seite auf dem iPhone oder WindowsPhone (auf denen konnte ich's probieren) ansehe, dann ist das Bild nicht angepasst (Höhe Bild = Höhe Bildschirm) wie am Rechner, sondern ich sehe nur ein Teil des Bildes in hoher Auflösung.

Kann mir jemand helfen das zu lösen?

[Gunnar Bittersmann]

@@anonym:

nuqneH

background-image: url("http://meinewebseitenadresse.de/XX.jpg");

Für Beispieldomains verwende bitte eine der nach BCP 32 dafür vorgesehenen.

Wenn ich jetzt aber mir die Seite auf dem iPhone oder WindowsPhone (auf denen konnte ich's probieren) ansehe, dann ist das Bild nicht angepasst (Höhe Bild = Höhe Bildschirm) wie am Rechner, sondern ich sehe nur ein Teil des Bildes in hoher Auflösung.

Ja, weil deren Viewport größer ist als du denkst.

Qapla'

[anonym]

Habe jetzt lange mit dem Viewport vieles ausprobiert.
Es hat sich nichts verändert auch mit einstellen des Viewports :(

[Gunnar Bittersmann]

@@anonym:

nuqneH

Habe jetzt lange mit dem Viewport vieles ausprobiert.
Es hat sich nichts verändert auch mit einstellen des Viewports :(

Doch, bei mir ändert sich da so einiges.

Aber wenn du nicht genau sagst, was du „vieles ausprobiert“ hast, kann man dir nicht weiterhelfen.

Qapla'

[anonym]

Was ich gemacht habe:

• Viewport eingestellt in der PHP und CSS Datei
• @media screen and (max-width: 752px)...... in der CSS Datei eingestellt
  (ohne Erfolg)...

[Gunnar Bittersmann]

@@anonym:

nuqneH

Was ich gemacht habe: […]
(ohne Erfolg)...

Du möchtest die Seite mal zeigen?

Qapla'

[anonym]

Die Seite ist nicht öffentlich zugänglich
lauft aber unter joomla 3 mit dem template protostar

[Gunnar Bittersmann]

@@anonym:

nuqneH

Es hat sich nichts verändert auch mit einstellen des Viewports :(

Du hast den verlinkten Artikel gelesen?

Darin steht übrigens auch, wie man es in CSS macht. Allerdings (noch) nicht für alle Browser.

Qapla'

[Gunnar Bittersmann]

@@anonym:

nuqneH

Um dir zuvorzukommen:

@@anonym:

nuqneH

background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

Die präfixfreie Eigenschaft sollte nach denen mit Präfix stehen.

Und wofür sollen die überhaupt gut sein? Laut caniuse braucht die niemand.

Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

Qapla'

[anonym]

Folgendes gemacht

• Viewport einstellen in CSS und PHP
• @media screen and (max-width: 752px)...... in der CSS Datei eingestellt