anonym: Hintergrundgrafik auf mobilen Browsern

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?

  1. @@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'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Habe jetzt lange mit dem Viewport vieles ausprobiert.
      Es hat sich nichts verändert auch mit einstellen des Viewports :(

      1. @@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'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. 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)...
          1. @@anonym:

            nuqneH

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

            Du möchtest die Seite mal zeigen?

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. Die Seite ist nicht öffentlich zugänglich
              lauft aber unter joomla 3 mit dem template protostar

      2. @@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'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. @@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'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  3. Folgendes gemacht

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