ORlando: background-image iPhone

problematische Seite

Hallo Forum,

habe Probleme mit dem background-image am iPphone wie auch am iPad. Das Bild wird riesengroß dargestellt. Am Macbook, an dem ich die Web-Site umgestzt habe ist alles tutti, in der Browservorschau wie auch im HTML-Editor.

Grüße, Orlando

Hier der HTML- sowie CSS-Code:

<body class="bg_sem">
.bg_sem {
   background-image: url("../images/bild2.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: cover; 
}
  1. problematische Seite

    Hallo Orlando,

    habe Probleme mit dem background-image am iPphone wie auch am iPad. Das Bild wird riesengroß dargestellt. Am Macbook, an dem ich die Web-Site umgestzt habe ist alles tutti, in der Browservorschau wie auch im HTML-Editor.

    Ohne Link zum Online-Beispiel kann man nicht viel sagen.

    Evtl. liegt es an der fehlenden Viewport-Angabe im Grundgerüst?

    Hier der HTML- sowie CSS-Code:

    <body class="bg_sem">
    
    .bg_sem {
       background-image: url("../images/bild2.jpg");
    	background-repeat: no-repeat;
    	background-position: center top;
    	background-attachment: fixed;
    	background-size: cover; 
    }
    

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. problematische Seite

      Hallo Matthias,

      ich dachte der Link unter problematische Seite wäre ausreichend.

      Hier aber die Adresse: http://cosmicfruitcompany.de/

      Gruß Orlando

      1. problematische Seite

        Hallo,

        ich dachte der Link unter problematische Seite wäre ausreichend.

        ja, das ist er auch eigentlich. Den hat Matthias vermutlich übersehen.

        Hier aber die Adresse: http://cosmicfruitcompany.de/

        Jetzt auch verlinkt. 😉

        Einen schönen Tag noch
         Martin

        --
        Мир для України.
    2. problematische Seite

      Nein, die Viewportangabe ist im Header. Daran liegt es nicht

  2. problematische Seite

    https://developer.mozilla.org/de/docs/Web/CSS/background-size

    „sagt“:

    „Das cover Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt.“

    Du schreibst:

    Das Bild wird riesengroß dargestellt.

    Also ich würde erwarten, dass das Bild um so mehr vergrößert wird, je länger der „Hintergrund-Positionierungsbereich“, also die zur Darstellung benötigte Fläche wird. Und auf kleinflächigen Geräten kann dieser Bereich sehr lang werden.

    Mithin bekommst Du womöglich genau was Du bestellt hast. Dem „rießengroß“ lässt sich jedenfalls nichts gegenteiliges entnehmen.

    1. problematische Seite

      Danke, das macht Sinn. Mir stellt sich jedoch die Frage, warum es im Browser am Laptop, bei sehr kleinem Browserfenster (Handy simuliert) herunterskaliert wird, an mobilen Endgeräten jedoch nicht.

      1. problematische Seite

        warum es im Browser am Laptop, bei sehr kleinem Browserfenster (Handy simuliert) herunterskaliert wird, an mobilen Endgeräten jedoch nicht.

        Ich kann es mangels eines passenden Gerätes nicht wissen. Frage: Schließt es denn unten sauber ab? (das wäre die Bestätigung) Oder mitten im Hintergrund?

        Ich weiß zudem nicht was Du siehst und auch nicht genau was Du erreichen willst. Damit wir also wissen worüber wir uns unterhalten: Hier das Bildschirmfoto auf meinem Smartphone (Chromium, „Adblockbrowser“, Android 10):

        Simulationen sind schließlich nur Simulationen.

        Möglicherweise willst Du ja spezieller zugeschnittene Hintergrundbilder für bestimmte Bildschirmformate bereit stellen:

        @media all {
           # Vielleicht kein Hintergrundbild für Drucke, Vorlesen etc?
        }
        
        
        @media screen, projection {
           # Quadratisch :-)- Nein-Einstellung für alle Screens
        }
        
        
        @media screen, projection and (orientation: portrait) {
           # Höher als breit
        }
        
        @media screen, projection and (orientation: landscape) {
           # Breiter als hoch.
        }

        Das kann man dann noch stufenweise mit Bildschirmgrößen kombinieren.

        Weitere Tipps:

        1. problematische Seite

          Hallo Raketenwilli,

          so wie auf deinem Screenshot ist das Ganze gedacht, also korrekt dargestellt.

          Auf diesem Bild siehst Du, wie es auf einem iPhone 8, einem iPhone SE sowie einem iPad der fünften Generation aussieht. .

          Grüße Orlando

          1. problematische Seite

            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            

            Weiß der Teufel, was das mit Deinem CSS macht.

            Gefunden:

            „The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.“

            Wir haben das Jahr 2022 und ich sehe keinen Grund mehr, das einzusetzen.

            Die letzte Version ist zudem 3.7.3 und die ist auch sieben Jahre alt, wurde ergo nie gegen Deinen aktuellen iKram(TM) getestet! Man kann nur hoffen (manche beten), dass es unschädlich ist.

            Es kann aber sehr gut sein, dass dieses shiv-Zeug Deine Webseite umschreibt, was da rauskäme wäre „basic HTML5 styling“ und kann mit dem Ergebnis zu tun haben.

            Hinfort damit!

    2. problematische Seite

      Es liegt tatsächlich an der Einstellung background-size: cover;

      Hat jemand einen Hack dafür? Es kommt ja soweit ich das jetzt sehen kann nur bei mobilen Macs vor.

      Grüße Orlando

      1. problematische Seite

        Es liegt tatsächlich an der Einstellung background-size: cover;

        Der HTML-Validator sagt immer noch, Deine Seite enthalte Fehler. In dem Fall schalten viele Browser in einen „Quirks-Modus“, dass bedeutet, diese zeigen die Seite nicht standard-konform an, denn Standard wäre nichts anzuzeigen. Außerdem müssen diese Browser spekulieren, was Du wohl gemeint hast - und sind deshalb ein wenig sauer auf Dich, weil Du Dich nicht klar ausdrückst.

        Wie schon ausgeführt kannst Du nicht damit rechnen, dass dann alles funktioniert. Repariere das.

        Hat jemand einen Hack dafür? Es kommt ja soweit ich das jetzt sehen kann nur bei mobilen Macs vor.

        Wenn Dein HTML repariert ist und es dennoch nicht geht: Besagte media-querys:

        https://forum.selfhtml.org/self/2022/apr/17/background-image-iphone/1798510#m1798510

        Geh einfach stufenweise vor und liefere grob passende Hintergründe aus.

        Es gäbe noch einen ganz üblen „Hack“ (Bild in <div>, den mittels z-index im Hintergrund). Tu das nicht…

  3. problematische Seite

    Hi there,

    habe Probleme mit dem background-image am iPphone wie auch am iPad. Das Bild wird riesengroß dargestellt. Am Macbook, an dem ich die Web-Site umgestzt habe ist alles tutti, in der Browservorschau wie auch im HTML-Editor.

    Hier der HTML- sowie CSS-Code:

    <body class="bg_sem">
    
    .bg_sem {
       background-image: url("../images/bild2.jpg");
    	background-repeat: no-repeat;
    	background-position: center top;
    	background-attachment: fixed;
    	background-size: cover; 
    }
    

    Das stimmt mit der Seite aber ohnehin nicht überein. Abgesehen davon, daß es normalerweise keinen Grund gibt, dem Body eine Klasse zu geben, hast Du da widersprüchliche Angaben drin. Im Styling vom Body-Element notierst Du:

    background-image: url(../images/bg_body2.jpg);
    

    (das ist vermutlich das Bild, das auch dargestellt wird)

    und dann gibts Du dem Body die Klasse bg_sem, wo ein Background-Image:

    background-image: url(../images/bild2.jpg);
    

    eingetragen hast, das aber soweit ich das sehe (ich tue mir bei Seite mit so einem Eso-Quatsch-Inhalt immer schwer, mir tränen da sofort die Augen) gar nicht angezeigt wird - das bedeutet aber mehr oder weniger, daß auch die anderen Anweisungen in der Klassendefinition ignoriert werden...

    1. problematische Seite

      Danke für die Antwort. Ich bin noch am testen, von daher kann es tatsächlich sein, das ich da sich "beharkende" CSS-Regeln habe. Checke das noch.

      PS: Schamanismus ist keine Esoterik

      1. problematische Seite

        Hi there,

        Danke für die Antwort. Ich bin noch am testen, von daher kann es tatsächlich sein, das ich da sich "beharkende" CSS-Regeln habe. Checke das noch.

        War ja nur ein Gedanke, daß da der Hund begraben liegen könnte. Wobei mir das Problem insoferne nicht ganz klar ist, als es auf einigen meiner Android-Geräten (getetest mit Samsung Galaxy S7, S9 und S21-Ultra) ganz normal aussieht. Aber ich weiß aus leidvoller Erfahrung, daß das Iphon ganz eigene Darstellungsvorstellungen haben kann.

        PS: Schamanismus ist keine Esoterik

        Ich seh' das anders, was aber nichts daran ändert, daß das da der falsche Platz für solche Erörterungen ist und ich mich deshalb für meine diesbezüglich unpassende Einlassung (kurz vor dem Abendessen bin ich immer grantig) entschuldige...