web-dev-qa-db-ja.com

背景：モバイルで動作しない繰り返しを修正

背景画像を画面全体に合わせて拡大縮小し、アスペクト比を維持して固定するWebページを構築しています（下にスクロールしても、背景画像は同じ場所に残ります）。

以下のCSSを使用してデスクトップブラウザーでこれを達成しましたが、iPhoneまたはiPadでは動作しません。これらのデバイスでは、背景が大きすぎて（折り目の下に続きます）、十分に下にスクロールすると、画像の繰り返しが始まります。誰でも修正がありますか？ありがとう！

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;
}
htmlioscssmobilesafari
29
user2874270

JavaScriptをまったく必要としないモバイルデバイスの固定背景用の優れたソリューションを見つけました。

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;
}

z-indexの負の-10値に注意してください。 htmlルート要素のデフォルトz-indexは0です。この値は、背景として使用するために最小のz-indexでなければなりません。

94
Vincent

これを修正するすべての方法に苦労した後、私はこのための非常にシンプルの解決策を持っていました。

モバイルで問題が発生しましたIOSデバイス。

css（デスクトップ）

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

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

次に、バックグラウンドの添付ファイルとして「修正済み」を削除するメディアクエリで上書きします。

css（モバイル）

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

    background-attachment: initial;

}
}

initial-このプロパティをデフォルト値に設定します。 IOSは 'fixed'を受け入れないため、受け入れるデフォルト値に戻ってスクロールすると思います。

これはすべてのデバイスでうまくいきました。他の人にも役立つことを願っています。

4
Ylama

モバイルとデスクトップの両方で100％作業する問題に対する完璧なソリューションを見つけた

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>
2
Mrinal Jain

すべてのデバイスで動作するparallax効果の最適なソリューションが見つかりました。

主なことは、すべてのセクションをz-index視差セクションより大きく設定することです。

そして、最大幅と高さで固定設定する視差画像要素

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

ヴィンセントの努力とジョーイ・ヘイズの仕事のおかげで、私はこれを持っています codepen 作業中Android複数の固定背景をサポートするモバイル

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は、思い出す限り既知のバグでした。

その他のオプションは次のとおりです。

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

一般に、固定位置はタッチでそれほど安定しているわけではないので（他のものよりもいくらか、Chromeはうまく機能します）、まだSafariで機能していますIOS 8 IOS 7で動作していたため、通常、Windows Mobileなどのタッチデバイスを検出するためにJSを使用します。

/* ============== 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の例では、最初にモバイルを想定しています：

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

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

私はそれを理解しようとして2日間、さまざまな投稿と方法を使用して忙しかった。 Eggsの投稿を見て、誰でも開始することをお勧めします。また、彼と他の人が作成したコードペンをいじります。

これは、私が見つけた適切に機能する唯一のソリューションです。私たち自身のWebアプリケーションでこの問題を解決している人たちにとって、彼の答えを解決策として/良い出発点としてお勧めします。

私は彼の投稿にコメントするほどの評判を得ていません。まだ投票することもできませんし、そうすることもあります。

これは私が使用した実際のコードです：

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.*/
}

私は彼の元のコードですべてを試しました。私が持っていたとき

background-position: center;

chrome（最新Android 1/8/18時点で更新）は画像の位置の更新に遅れるので、ウェブサイトをスクロールするとnavbar/URLバーに色のパッチが表示されますブラウザのイメージセンターが再計算された後、それは消えます（これは私が想定していたことです）。

そのため、フッターまたはヘッダーの周りに画像を作成し、位置を左上/右または左下/右に設定することをお勧めします。

要約すると、これは私のために働く。ここまで読んでいて、まだ何も機能していない場合は試してみてください。すでに元の投稿にアクセスしているはずですが。

エッグス、そしてあなたのコデペンで協力してくれた他の仲間に感謝します。

1
Willie

「背景サイズ：カバー;」 Firefoxを除くすべてのモバイルブラウザで多くの問題が発生します！

これは私の問題を修正しました：

/* 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

私は同じ問題を抱えていましたが、今では動作します。私がしなければならなかったことはbackground-size: cover !important;そして、それは私のAndroidデバイスで動作します！

コード全体は次のようになります。

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;
}

@taylan derinbayと@Vincentに感謝します！

0
Sam Gallon

これは私がやっていることであり、それはすべてで動作します:)

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

}

その後...

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

この質問に対する私の答えを参照してください： バックグラウンド接続のサポートを検出：修正？

  • タッチ機能を検出するだけでは、タッチスクリーンを搭載したラップトップでは機能しません。また、一部のデバイスでは、Christinaによるタッチ検出を検出するためのコードが失敗します。
  • Hectorの答えは機能しますが、アニメーションは非常に途切れるので、fixedを、fixedをサポートしないデバイスのスクロールに置き換える方が見栄えがよくなります。
  • 残念ながら、iOS 5+はbackground-attachment：fixedをサポートしているため、Taylonは間違っています。ありません。固定背景をサポートしていないデバイスのリストが見つかりません。ほとんどの携帯電話とタブレットはそうではないでしょう。
0
mattthew

モバイルデバイスは固定位置では機能しないと思います。 skrollr.jsなどのjsプラグインを試してください（たとえば）。この種のプラグインを使用すると、スクロールバーの位置の関数でdiv（または何でも）の位置を選択できます。

0
Héctor

私はパーティーに遅れていますが、これは（信じられないほど） まだ問題 2017年11月5日の時点です。以下は、cross-platformとlinear gradients：

.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

Android 2.2およびiOS 5。

メタでビューポート付きのデバイスを使用し、IDのある場所に背景画像を指定する必要があります。次に、jqueryでそのIDを取得し、高さを指定します。そしてもちろん100％の幅

<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