it-swarm.com.de

hintergrund: behoben, dass keine Wiederholung auf dem Handy nicht funktioniert

Ich baue eine Webseite, auf der das Hintergrundbild so skaliert werden soll, dass es auf den gesamten Bildschirm passt, das Seitenverhältnis beibehalten und fixiert wird (wenn Sie also nach unten scrollen, bleibt das Hintergrundbild an derselben Stelle).

Ich habe dies in Desktop-Browsern mit der folgenden CSS erreicht, aber es funktioniert nicht auf einem iPhone oder iPad. Auf diesen Geräten ist der Hintergrund zu groß (er geht unterhalb der Falte weiter) und wenn Sie weit genug nach unten scrollen, beginnt sich das Bild zu wiederholen. Hat jemand ein Problem? Vielen Dank!

HTML {
  background: url(photos/2452.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
26
user2874270

Ich habe eine gute Lösung für feste Hintergründe auf mobilen Geräten gefunden, für die überhaupt kein JavaScript erforderlich ist.

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Bitte beachten Sie den negativen z-index-Wert von -10. html Stammelementvorgabe z-index ist 0. Dieser Wert muss der kleinste z-index sein, damit er als Hintergrund verwendet wird.

85
Vincent

Ich hatte eine sehr einfache Lösung dafür, nachdem ich mit allen Methoden zu deren Behebung zu kämpfen hatte.

ich hatte das Problem auf meinem Handy IOS Geräte.

CSS (Desktop)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

Dann überschreibe ich es mit der Medienabfrage, die "repariert" als Hintergrundzubehör entfernt.

css (mobil)

@media (max-width: 767px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial - Setzt diese Eigenschaft auf ihren Standardwert. Ich denke, weil IOS 'fixed' nicht akzeptiert, fällt es auf einen Standardwert zurück, den es akzeptiert, scrollen.

Das hat bei mir auf jedem Gerät geklappt. Hoffe, es hilft auch jemand anderem.

4
Ylama

Ich habe vielleicht die beste Lösung für Parallax Effekt gefunden, die auf allen Geräten funktionieren .

Die Hauptsache ist, alle Abschnitte mit z-index größer als Parallaxenabschnitt einzustellen. 

Und Parallax Image-Element festgelegt mit maximaler Breite und Höhe festgelegt

body, html { margin: 0px; }
section {
  position: relative; /* Important */
  z-index: 1; /* Important */
  width: 100%;
  height: 100px;
}

section.blue { background-color: blue; }
section.red { background-color: red; }

section.parallax {
  z-index: 0; /* Important */
}

section.parallax .image {
  position: fixed; /* Important */
  top: 0; /* Important */
  left: 0; /* Important */
  width: 100%; /* Important */
  height: 100%; /* Important */
  background-image: url(https://www.w3schools.com/css/img_fjords.jpg);
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
<section class="blue"></section>
<section class="parallax">
  <div class="image"></div>
</section>
<section class="red"></section>

1
Nebojsa Sapic

Ich habe eine perfekte Lösung für das Problem gefunden

https://codepen.io/mrinaljain/pen/YObgEP

.jpx-is-wrapper {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 314749261;
    width: 100vw;
    height: 300px
}

.jpx-is-wrapper>.jpx-is-container {
    background-color: transparent;
    border: 0;
    box-sizing: content-box;
    clip: rect(auto auto auto auto);
    color: black;
    left: 0;
    margin: 0 auto;
    overflow: visible;
    position: absolute;
    text-align: left;
    top: 0;
    visibility: visible;
    width: 100%;
    z-index: auto;
    height: 300px
}

.jpx-is-wrapper>.jpx-is-container>.jpx-is-content {
    left: 0;
    overflow: hidden;
    right: 0;
    top: 0;
    visibility: visible;
    width: 100%;
    position: relative;
    height: 300px;
    display: block
}

.jpx-is-wrapper>.jpx-is-container>.jpx-is-content>.jpx-is-ad {
    -webkit-box-shadow: rgba(0,0,0,0.65) 0 0 4px 2px;
    -moz-box-shadow: rgba(0,0,0,0.65) 0 0 4px 2px;
    box-shadow: rgba(0,0,0,0.65) 0 0 4px 2px;
    bottom: 26px;
    left: 0;
    margin: 0 auto;
    right: 0;
    text-align: center;
    height: 588px;
    top: 49px;
    bottom: auto;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0)
}

.jpx-position-fixed {
    position: fixed
}

.jpx-is-wrapper>.jpx-is-container>.jpx-is-content>.jpx-is-ad>.jpx-is-ad-frame {
    width: 100%;
    height: 100%
}

.black-fader {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0.75
}

.video-containers {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0
}

.video-containers video,.video-containers img {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
<p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p>

<div class="jpx-is-wrapper">
                       <div class="jpx-is-container">
                          <div class="jpx-is-content">
                             <div class="jpx-is-ad jpx-position-fixed">
                                   <div scrolling="no" width="100%" height="100%" class="jcl-wrapper" style="border: 0px; display: block; width: 100%; height: 100%;">
                                       <div class="video-containers" id="video-container">
                                          <img src="https://via.placeholder.com/350x150" alt="" class="">
                                       </div>
                                  </div>
                             </div>
                          </div>
                       </div>
                    </div>

<p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p>

1
Mrinal Jain

Dank der Bemühungen von Vincent und der Arbeit von Joey Hayes habe ich diese codepen Arbeit auf Android-Handys, die mehrere feste Hintergründe unterstützen 

HTML:

<html>

<body>
  <nav>Nav to nowhere</nav>
  <article>

    <section class="bg-img bg-img1">
      <div class="content">
        <h1>Fixed backgrounds on a mobile browser</h1>
      </div>
    </section>

    <section class="solid">
      <h3>Scrolling Foreground Here</h3>
    </section>

    <section>
      <div class="content">
        <p>Quid securi etiam tamquam eu fugiat nulla pariatur. Cum ceteris in veneratione tui montes, nascetur mus. Quisque placerat facilisis egestas cillum dolore. Ambitioni dedisse scripsisse iudicaretur. Quisque ut dolor gravida, placerat libero vel,
          euismod.
        </p>
      </div>
    </section>

    <section class="solid">
      <h3>Scrolling Foreground Here</h3>
    </section>

    <section class="footer">
      <div class="content">
        <h3>The end is nigh.</h3>
      </div>
    </section>

  </article>
  </body>

CSS:

* {
  box-sizing: border-box;
}

body {
  font-family: "source sans pro";
  font-weight: 400;
  color: #fdfdfd;
}
body > section >.footer {
  overflow: hidden;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  background-color: silver;
  z-index: 999;
  text-align: center;
  font-size: 2em;
  opacity: 0.8;
}

article {
  position: relative;
  font-size: 1em;
}

section {
  height: 100vh;
  padding-top: 5em;
}

.bg-img::before {
  position: fixed;
  content: ' ';
  display: block;
  width: 100vw;
  min-height: 100vh;  
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-position: center;
  background-size: cover;
  z-index: -10; 
}

.bg-img1:before {
      background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326836/3balls_1280.jpg');
}
.bg-img2::before {
      background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326840/icebubble-1280.jpg');
}
.bg-img3::before {
      background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326844/soap-bubbles_1280.jpg');
}

h1, h2, h3 {
  font-family: lato;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.content {
  max-width: 50rem;
  margin: 0 auto;
}
.solid {
  min-height: 100vh;
  width: 100%;
  margin: auto;
  border: 1px solid white;
  background: rgba(255, 255, 255, 0.6);
}

.footer {
  background: rgba(2, 2, 2, 0.5);
}

JS/JQUERY

window.onload = function() {

  // Alternate Background Page with scrolling content (Bg Pages are odd#s)
  var $bgImg = $('.bg-img');
  var $nav = $('nav');
  var winh = window.innerHeight;
  var scrollPos = 0;
  var page = 1;
  var page1Bottom = winh;
  var page3Top = winh;
  var page3Bottom = winh * 3;
  var page5Top = winh * 3;
  var page5Bottom = winh * 5;

  $(window).on('scroll', function() {

    scrollPos = Number($(window).scrollTop().toFixed(2));
    page = Math.floor(Number(scrollPos / winh) +1);
    if (scrollPos >= 0 && scrollPos < page1Bottom ) {    
      if (! $bgImg.hasClass('bg-img1')) {

        removeBg( $bgImg, 2, 3, 1 ); // element, low, high, current
        $bgImg.addClass('bg-img1');
      }
    } else if (scrollPos >= page3Top && scrollPos <= page3Bottom) {
      if (! $bgImg.hasClass('bg-img2')) {

        removeBg( $bgImg, 1, 3, 2 ); // element, low, high, current
        $bgImg.addClass('bg-img2');
      }
    } else if (scrollPos >= page5Top && scrollPos <= page5Bottom) {
      if (! $bgImg.hasClass('bg-img3')) {

        removeBg( $bgImg, 1, 2, 3 ); // element, low, high, current
        $bgImg.addClass('bg-img3');
      }
    }
    $nav.html("Page# " + page + " window position: " + scrollPos);

  });
}

// This function was created to fix a problem where the mouse moves off the
// screen, this results in improper removal of background image class. Fix
// by removing any background class not applicable to current page.
function removeBg( el, low, high, current ) {
  if (low > high || low <= 0 || high <= 0) {
    console.log ("bad low/high parameters in removeBg");
  }
  for (var i=low; i<=high; i++) {
    if ( i != current ) { // avoid removing class we are trying to add
      if (el.hasClass('bg-img' +i )) {
        el.removeClass('bg-img' +i );
      }
    }
  } 
} // removeBg()
1
Eggs

background-attachment:fixed in IOS Safari ist ein bekannter Fehler, solange ich mich erinnern kann.

Hier sind einige andere Optionen für Sie:

https://stackoverflow.com/a/23420490/1004312

Da die feste Position im Allgemeinen beim Berühren nicht so stabil ist (einige funktionieren mehr als andere, Chrome funktioniert hervorragend), verhält es sich in Safari IOS 8 immer noch in Situationen, in denen zuvor in IOS 7 gearbeitet wurde Daher verwende ich in der Regel nur JS zur Erkennung von Touch-Geräten, einschließlich Windows Mobile.

/* ============== SUPPORTS TOUCH OR NOT ========= */
/*! Detects touch support and adds appropriate classes to html and returns a JS object
  Copyright (c) 2013 Izilla Partners Pty Ltd  | http://www.izilla.com.au 
  Licensed under the MIT license  |  https://coderwall.com/p/egbgdw 
*/
var supports = (function() {
    var d = document.documentElement,
        c = "ontouchstart" in window || navigator.msMaxTouchPoints;
    if (c) {
        d.className += " touch";
        return {
            touch: true
        }
    } else {
        d.className += " no-touch";
        return {
            touch: false
        }
    }
})();

CSS-Beispiel geht von mobile zuerst aus:

.myBackgroundPrecious {
   background: url(1.jpg) no-repeat center center;
   background-size: cover;
}

.no-touch .myBackgroundPrecious {
   background-attachment:fixed;
}
1
Christina

Ich war seit zwei Tagen damit beschäftigt, verschiedene Beiträge und Methoden zu verwenden, um es herauszufinden. Ich fordere jeden auf zu STARTEN, indem ich den Post von Eggs anschaue und mit dem Codepen herumfummle, den er und andere gebaut haben.

Dies war die einzige Lösung für mich, die ich gefunden habe. Ich empfehle seine Antwort als eine Lösung/ein guter Ausgangspunkt für alle, die dieses Problem in unseren eigenen Webanwendungen noch nicht kennen.

Ich habe noch nicht genug Ansehen, um seinen Beitrag zu kommentieren, sonst würde ich das tun. Ich kann noch nicht einmal darüber abstimmen oder ich würde das auch tun.

Dies ist der eigentliche Code, den ich verwendet habe:

html::before {
    content: ' ';
    display: block;
    background-image: url('path-to-your-image');
    background-position: bottom left; 
    /*For my instance this is how I have built my bg image. Indexes off the 
bottom left for consistency*/
    background-size: cover;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: -10; 
    /*I haven't tested my full app functionality after changing the z-index, but everything appears to work flawlessly right now.*/
}

Ich habe alles mit seinem Originalcode versucht. Als ich hatte 

background-position: center; 

chrome (auf dem neuesten Android-Update vom 1.8.18) würde mit der Aktualisierung der Bildposition verzögern. Wenn Sie also durch die Website scrollen, würde es einen Farbfleck geben, an dem sich meine Navbar/URL-Leiste des Browsers befand. Dann verschwindet es, nachdem der Browser die Bildmitte neu berechnet hat (was ich vermute).

Daher empfehle ich, ein Bild um Ihre Fußzeile oder Kopfzeile zu erstellen, und zwar entweder oben links/rechts oder unten links/rechts für Ihre Position.

Zusammenfassend funktioniert das für mich. Also probieren Sie es aus, wenn Sie so weit unten lesen und noch nichts funktioniert hat. Du hättest den ursprünglichen Beitrag aber schon getroffen. 

Vielen Dank, Eggs, und den anderen Kollegen, mit denen Sie an Ihrem Codepen zusammengearbeitet haben.

1
Willie

"Hintergrundgröße: Abdeckung;" verursacht viele Probleme bei allen mobilen Browsern außer Firefox!

Dies hat mein Problem behoben:

/* Mobile first */
body{
    background-image: url(bg_mobile.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Then tablets, laptops and desktops (768px and up) */
@media screen and (min-width:768px) {
body{
    background-image: url(bg.jpg);
    background-size: cover;
    }
}
1
Matthew C

Ich hatte das gleiche Problem, aber jetzt funktioniert es ... Alles, was ich tun musste, war, background-size: cover !important; hinzuzufügen und es funktioniert auf meinem Android-Gerät! 

Der gesamte Code sieht folgendermaßen aus:

body.page-id-8 #art-main {
  background: #000000 url("link to image") !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-attachment: fixed !important;
  background-color: transparent !important;
  background-size: cover !important;
}

Vielen Dank an @taylan derinbay und @Vincent! 

0
Sam Gallon

Das ist was ich mache und es funktioniert überall :) 

.container {
  background: url(${myImage})
  background-attachment: fixed;
  background-size: cover;
 transform: scale(1.1, 1.1);

}

dann... 

@media only screen and (max-width: 768px){
   background-size: 100% 100vh;
}
0
pjdux

Siehe meine Antwort auf diese Frage: Unterstützung für Hintergrundanhänge erkennen: behoben?

  • Das Erkennen der Berührungsfunktion alleine funktioniert nicht für Laptops mit Touchscreens. Bei einigen Geräten schlägt der Code zum Erkennen der Berührung durch Christina fehl. 
  • Die Antwort von Hector wird funktionieren, aber die Animation wird sehr abgehackt sein. Daher wird es besser sein, fixiertes durch Scrollen auf Geräten zu ersetzen, die nicht fixiert sind.
  • Leider ist Taylon falsch, dass iOS 5+ Hintergrundanhänge unterstützt: behoben. Es tut nicht. Ich kann keine Liste von Geräten finden, die keine festen Hintergründe unterstützen. Es ist wahrscheinlich, dass die meisten Mobiltelefone und Tablets dies nicht tun.
0
mattthew

Ich denke, dass mobile Geräte nicht mit festen Positionen funktionieren. Sie sollten es mit einem js-Plugin wie zum Beispiel skrollr.js versuchen. Mit dieser Art von Plugin können Sie die Position Ihres div (oder was auch immer) in Abhängigkeit von der Bildlaufleistenposition auswählen.

0
Héctor

Ich bin spät auf der Party, aber das ist (unglaublich) immer noch ein Problem ab dem 11.05.2017. Hier ist eine einfache Lösung, die auch plattformübergreifend mit linearen Gradienten funktioniert:

.backgroundFixed {
  background: linear-gradient(160deg, #2db4a8 0%, #13af3d 100%);
  background-size: 100vw 100vh;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: -1000;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
    <div class="backgroundFixed"></div>
    <div class="paragraphContainer">
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
    </div>
  </body>
</html>

0
Tom

Die feste Positionierung wird seit Android 2.2 und iOS 5 auf mobilen Geräten unterstützt.

Sie müssen das Gerät mit Viewport in Meta verwenden und das Hintergrundbild irgendwo mit einer ID angeben. Dann erhalten Sie diese ID mit Jquery und geben dieser Höhe eine Höhe. Und natürlich 100% Breite

<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #main {
          background: url(1.jpg) no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          width: 100%;
          overflow: hidden;
        }
    </style>
</head>
<body id="main">

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    var hgt = $(window).height();
    $("#main").css("height", hgt)
</script> 

http://jsfiddle.net/talendil/oackpmv5/

0
Taylan Derinbay