Fixed Background auf dem Smartphone?

Dsimon24 · 18. August 2020

Hallo zusammen,

mit dem folgenden Code (HTML / CSS) bekomme ich ein hinterlegtes Background-Image auf dem
Desktop fixiert - es scrollt also nicht mit. Auf dem Smartphone hingegen, scrollt es mit. Wie kann
ich es auf dem Smartphone ebenfalls wie auf dem Desktop fixiert bekommen?

CSS:

.bg_front {
    background: url('img/background_pa_100.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    background-attachment: scroll
}

HTML:

<html class="bg_front">
    <h1>
        Hallo
    </h1>
    <p>
        und so weiter
    </p>
    <p>
        und so fort
    </p>
</html>

LG,

madmax2010 · 18. August 2020

einen anderen Launcher installieren -
Apex Launcher kann das glaube ich

Das_Oni · 18. August 2020

Versuch es doch mal mit

background-attachment: fixed;

scroll impliziert ja das es scrollen soll.

Dsimon24 · 18. August 2020

madmax2010 schrieb:
Apex Launcher

Was hat das mit dem Launcher zu tun? Ich programmiere
die Website ja nicht nur für mich - oder wie meinst du das?

Das_Oni schrieb:
Versuch es doch mal mit
background-attachment: fixed;
scroll impliziert ja das es scrollen soll.

Sorry, habe zu viel geändert.
Bei mir steht bereits fixed - funktioniert aber nicht.
Kann es sein, dass es bei Smartphones grundsätzlich nicht funktioniert?

Das_Oni · 18. August 2020

Schau mal hier nach der Technik 2

https://css-tricks.com/perfect-full-page-background-image/

Mal davon ab, würde ich nicht dem HTML das Hintergrundbild geben, sondern dem Body

<html>
<head>
</head>
<body>
</body>
</html>

Noch besser wäre ein div im body mit 100% height und width, was das Bild als background image hat.

madmax2010 · 18. August 2020

Ups. Ich dachte du beziehst dich auf den Desktop Hintergrund.

Dsimon24 · 18. August 2020

Das_Oni schrieb:
Schau mal hier nach der Technik 2

https://css-tricks.com/perfect-full-page-background-image/

Mal davon ab, würde ich nicht dem HTML das Hintergrundbild geben, sondern dem Body

<html>
<head>
</head>
<body>
</body>
</html>

Noch besser wäre ein div im body mit 100% height und width, was das Bild als background image hat.

Hmm, habe alles mal getestet, gerade - funktioniert aber alles
nur auf dem Rechner - nicht aber auf dem Smartphone.

Das_Oni · 18. August 2020

Mit was für einem Smartphone und mobilen Browser testest Du denn?

Hast Du mal versucht mit der Console des Browsers zu testen?

F12 drücken und dann entsprechend https://developers.google.com/web/tools/chrome-devtools/device-mode

Du kannst mir auch den Link zur Seite per PN schicken wenn Du möchtest.

Joshinator · 18. August 2020

https://caniuse.com/#search=background-attachment

Ich vermute mal dass das Handy ein iPhone ist, fixed wird von Apple nicht supported.
Meine dazu gelesen zu haben das Apple das aus Performance-Gründen nicht einbauen will.

Als Alternative bleibt dir nur das ganze per z-index & position fixed zu machen.
Also ein div der 100% groß & breit ist der dann per z-index und fixed als Hintergrund positioniert wird.

Edit: https://stackoverflow.com/a/23420490 da, deaktiviert weil das recht viel Performance braucht.

netzgestaltung · 18. August 2020

hi,

ich würde einen container fixed positionieren und per z-index in den hintergrund schieben.
Das würde abgesehen von der background-size sowie viewportheight auch noch im IE6 funktionieren.

HTML:

<html>
  <body>
    <div class="content">
      <h1>Hallo</h1>
      <p>und so weiter</p>
      <p>und so fort</p>
    </div>
    <div class="bg_front"></div>
  </body>
</html>

CSS:

.bg_front {
  height:100vh; /* unabhängig von der höhe des bodys */
  width:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:30;
  background:url('img/background_pa_100.png') 50% 50% no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
}
.content{
  position:relative; /* wird für z-index benötigt */
  z-index:50;
}

Suche

Fixed Background auf dem Smartphone?

Dsimon24

Lieutenant

madmax2010

Fleet Admiral

Das_Oni

Lt. Junior Grade

Dsimon24

Lieutenant

Das_Oni

Lt. Junior Grade

madmax2010

Fleet Admiral

Dsimon24

Lieutenant

Das_Oni

Lt. Junior Grade

Joshinator

Commander

netzgestaltung

Captain

Ähnliche Themen