mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 22:17 Benutzername: Passwort: Auto-Login

Thema: Hintergrund background-image: cover vom 20.07.2016


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Hintergrund background-image: cover
Autor Nachricht
Schmitty
Threadersteller

Dabei seit: 24.06.2013
Ort: -
Alter: 49
Geschlecht: Männlich
Verfasst Mi 20.07.2016 16:11
Titel

Hintergrund background-image: cover

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen!
Ich habe das Problem, dass sich der Befehl background-image: cover für das Hintergrundbild einer Internetseite leider nicht korrekt verhält. In meiner Desktop-Ansicht verhält er sich wie gewünscht und füllt die komplette Seite aus, im Portrait-Modus auf dem Smartphone allerdings wird das Hintergrundbild wie background-image: contain angezeigt.

Code:
body {
   background-image: url(TLD/images/background-image.jpg);
   background-size: cover;
   background-attachment: fixed;
}


Gibt es da unter dem BODY-Tag etwas zu beachten?
  View user's profile Private Nachricht senden
dieselross

Dabei seit: 18.07.2016
Ort: Barnstorf
Alter: 63
Geschlecht: Männlich
Verfasst Do 21.07.2016 15:30
Titel

Antworten mit Zitat Zum Seitenanfang

Vielleicht hilft dir ja ein Blick auf: https://css-tricks.com/perfect-full-page-background-image/.
Das background image wird hier auf das html-Element angewendet, nicht auf das body-Element.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
heav

Dabei seit: 10.02.2004
Ort: Heimat der Inspiration
Alter: 39
Geschlecht: Männlich
Verfasst Fr 22.07.2016 13:52
Titel

Antworten mit Zitat Zum Seitenanfang

Ist dein Smartphone ein iPhone?
iOS ignoriert „background-size: cover“ vollständig,
hat soweit ich weiß irgendwas mit Performance zu tun.
  View user's profile Private Nachricht senden
Morgo

Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht: Männlich
Verfasst Fr 22.07.2016 17:28
Titel

Antworten mit Zitat Zum Seitenanfang

Unter iOS wird beim Scrollen nicht direkt ein Repaint ausgelöst. Das bedeutet, dass die Kombination von backgound-size:cover und background-attachment: fixed sich hier nicht wie gewohnt verhält (zweiteres wird ignoriert). Lösung wäre je nach Anwendungsfall entweder auf background-attachement: scroll zu stellen oder z.B. das Hintergrundbild auf ein Element zu setzen, das auf position: fixed steht (was je nach iOS Version auch Probleme machen kann). Ich würde es in mobilen Viewports ganz weglassen.
  View user's profile Private Nachricht senden
 
Ähnliche Themen background-image & FF
CSS background-image
[CSS] Background-image INE
[CSS] alt-tag für background-image?
CSS background-image mit em ?
ie 6 background image problem
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.