nicht angemeldet
background-image iPhone
Matthias Scharwies
Der MartinHallo 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;
}
-
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.“-
Hallo Matthias,
ich dachte der Link unter problematische Seite wäre ausreichend.
Hier aber die Adresse: http://cosmicfruitcompany.de/
Gruß Orlando
-
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--
Мир для України.
-
-
Nein, die Viewportangabe ist im Header. Daran liegt es nicht
-
-
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.
-
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.
-
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:
- Der HTML-Validator meckert Dein HTML an. So lange der DAS tut würde ich nicht damit rechnen, dass die Webseite überall entsprechend meinen Erwartungen aufscheint.
- Der CSS-Validator geht gerade mal wieder- da sehe ich aber nichts (abgesehen von den fehlenden Media-Querys)
-
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
-
<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!
-
-
-
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
-
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 mittelsz-indexim Hintergrund). Tu das nicht…
-
-
-
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...
-
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
-
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...
-
-
