Html 背景：固定不重复不能在移动设备上工作

background: fixed no repeat not working on mobile

提问by user2874270

I am building a webpage where I want the background image to scale to fit the whole screen, maintain aspect ratio and be fixed (so if you scroll down, the background image stays in the same place).

我正在构建一个网页，我希望背景图像可以缩放以适合整个屏幕，保持纵横比并固定（因此，如果向下滚动，背景图像将保持在同一位置）。

I have achieved this in desktop browsers with the CSS below, but it doesn't work on an iPhone or iPad. On those devices the background is too big (it continues below the fold) and if you scroll down far enough, the image will start repeating. Anyone have a fix? THanks!

我已经使用下面的 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;
}

回答by Vincent

I have found a great solution for fixed backgrounds on mobile devices requiring no JavaScript at all.

我在完全不需要 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;
}

Please be aware of the negative z-indexvalue of -10. htmlroot element default z-indexis 0. This value must be the smallest z-indexto have it as background.

请注意负面的z-index价值-10。html根元素默认z-index为0. 该值必须是最小的z-index才能将其作为背景。

回答by Ylama

I had a very simplesolution for this, after struggling with all the methods of fixing this.

在尝试了所有解决此问题的方法之后，我对此有一个非常简单的解决方案。

i had the problem on my mobile IOS devices.

我在我的移动 IOS 设备上遇到了问题。

css(desktop)

css（桌面）

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

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

Then i overwrite it with media query removing "fixed" as background attachment.

然后我用媒体查询覆盖它，删除“固定”作为背景附件。

css(mobile)

css（移动）

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

    background-attachment: initial;

}
}

initial - Sets this property to its default value. I think because IOS doesn't accept 'fixed' it falls back to a default value it accepts, scroll.

初始 - 将此属性设置为其默认值。我认为因为 IOS 不接受“固定”，所以它会回退到它接受的默认值，滚动。

This worked for me on every device. Hope it helps someone else as well.

这在每台设备上都对我有用。希望它也能帮助其他人。

回答by Mrinal Jain

Found a perfect solution for the problem 100% working on mobile as well as desktop

为 100% 在移动设备和桌面设备上工作的问题找到了完美的解决方案

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

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>

回答by Nebojsa Sapic

I found maybe best solution for parallaxeffect which work on all devices.

我找到了适用于所有设备的视差效果的最佳解决方案。

Main thing is to set all sections with z-indexgreater than parallax section.

主要是设置z-index大于视差部分的所有部分。

And parallax image element to set fixed with max width and height

和视差图像元素设置为固定的最大宽度和高度

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>

回答by Matthew C

"background-size: cover;" causes a lot of issues on all mobile browsers except Firefox!

“背景尺寸：封面；” 在除 Firefox 之外的所有移动浏览器上导致很多问题！

This fixed my issue:

这解决了我的问题：

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

回答by Willie

I have been busy using different posts and methods for two days trying to figure it out. I urge anyone to START by looking at the post by Eggs, and mess around with the codepen he and others have built.

这两天我一直忙于使用不同的帖子和方法试图弄清楚。我敦促任何人通过查看 Eggs 的帖子开始，并使用他和其他人构建的代码笔。

This has been the only solution to work properly for me that I have found. I recommend his answer as a solution/ a good starting point at minimum for those of us still figuring out this problem in our own web applications.

这是我找到的唯一适合我的解决方案。我推荐他的答案作为解决方案/至少对于我们这些仍在我们自己的 Web 应用程序中解决这个问题的人来说是一个很好的起点。

I haven't gotten enough reputation yet to comment on his post, otherwise I would. I can't even vote on it yet or I would do that too.

我还没有获得足够的声誉来评论他的帖子，否则我会。我什至不能投票，否则我也会这样做。

This is the actual code I used:

这是我使用的实际代码：

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

I tried everything with his original code. When I had

我用他的原始代码尝试了一切。当我有

background-position: center; 

chrome (on latest android update as of 1/8/18) would lag with updating the image's position, so when scrolling through the website there would be a patch of color where my navbar/URL bar of the browser was. Then it would disappear after the browser recalculated the image center(is what I assume was happening).

chrome（截至 2018 年 1 月 8 日的最新 android 更新）会滞后于更新图像的位置，因此在浏览网站时，浏览器的导航栏/URL 栏所在的位置会出现一块颜色。然后它会在浏览器重新计算图像中心后消失（这是我假设正在发生的）。

So, I recommend making an image around your footer or header like I did, and setting either top left/right or bottom left/right for your position.

因此，我建议像我一样围绕页脚或页眉制作图像，并为您的位置设置左上/右下或左/右下。

In summary, THIS WORKS for me. So try it out if you're reading down this far and nothing has worked yet. Though you should've already hit the original post by now.

总之，这对我有用。因此，如果您读到这里并且没有任何效果，请尝试一下。虽然你现在应该已经点击了原始帖子。

Thank you Eggs, and the other fellows you collaborated with on your Codepen.

感谢 Eggs 以及与您合作开发 Codepen 的其他同事。

回答by Christina

background-attachment:fixedin IOS Safari has been a known bug for as long as I can recall.

background-attachment:fixed在 IOS Safari 中一直是一个已知的错误，只要我记得。

Here's some other options for you:

这里有一些其他选项供您选择：

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

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

Since the fixed position in general is not all that stable on touch (some more than others, Chrome works great), it is still acting up in Safari IOS 8 in situations that used to work in IOS 7, therefore I generally just use JS to detect touch devices, including Windows mobile.

由于通常的固定位置在触摸时并不是那么稳定（有些比其他的多，Chrome 工作得很好），它仍然在 Safari IOS 8 中在过去在 IOS 7 中工作的情况下起作用，因此我通常只使用 JS检测触摸设备，包括 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 example assumes mobile first:

CSS 示例假设移动优先：

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

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

回答by Eggs

Thanks to the efforts of Vincent and work by Joey Hayes, I have this codepenworking on android mobile that supports multiple fixed backgrounds

感谢 Vincent 的努力和 Joey Hayes 的工作，我有这个代码笔在支持多个固定背景的 android 手机上工作

HTML:

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:

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

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()

回答by Tom

I'm late to the party, but this is (unbelievably) still a problemas of the 11.05.2017. Here is a simple solution which will also work cross-platformwith linear gradients:

我迟到了，但截至 2017 年 5 月 11日，这（令人难以置信）仍然是一个问题。这是一个简单的解决方案，它也可以使用线性渐变跨平台工作：

.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>

回答by Sam Gallon

I've been having the same problem, but now it works. All I had to do was add background-size: cover !important;and it works on my Android device!

我一直有同样的问题，但现在它起作用了。我所要做的就是添加background-size: cover !important;它，它可以在我的 Android 设备上运行！

The entire code looks like this:

整个代码如下所示：

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

Thanks a lot @taylan derinbay and @Vincent!

非常感谢@taylan derinbay 和@Vincent！