blocks|key|62550|text|我认为移动设备不能在固定位置工作。你应该尝试一些像skrollr.js这样的js插件(例如)。有了这种插件，你可以在滚动条位置的函数中选择div的位置(或者其他任何东西)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|62551|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I think that mobile devices dont work with fixed positions. You should try with some js plugin like skrollr.js (for example). With this kind of plugin you can select the position of your div (or whatever) in function of scrollbar position.</p>


blocks|key|62582|text|从Android2.2和iOS+5开始，移动设备支持固定定位。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|62583|你需要在meta上使用带有视窗的设备，并在某个地方给出带有id的背景图像。然后，您将使用jquery获取该id，并为其赋予一个高度。当然还有100%25的宽度|62584|<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%25;
++++++++++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>+|code-block|syntax|javascript|62585|http://jsfiddle.net/talendil/oackpmv5/|offset|length|62586|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|12|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

<p>Fixed positioning is supported on mobile since Android 2.2 and iOS 5.</p>

<p>You need to use device-with viewport on meta and give the background image with somewhere with an id. Then you will get that id with jquery and give that a height. And of course 100% width</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;style&gt;
        #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;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body id="main"&gt;

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

<p>
</p>

<p><a href="http://jsfiddle.net/talendil/oackpmv5/" rel="nofollow">http://jsfiddle.net/talendil/oackpmv5/</a></p>


blocks|key|62631|text|我已经找到了一个很好的解决方案，可以在不需要JavaScript的移动设备上实现固定背景。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|62632|body:before+{
++content:+"";
++display:+block;
++position:+fixed;
++left:+0;
++top:+0;
++width:+100%25;
++height:+100%25;
++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;
}|code-block|syntax|javascript|62633|请注意-10的负z-index值。html根元素默认z-index为0。该值必须是最小的z-index，才能将其作为背景。|offset|length|style|CODE|62634|entityMap^0|0|0|3|3|8|7|H|4|Q|7|Y|1|18|7|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]|$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|N|$]]

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

<pre><code>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;
}
</code></pre>

<p>Please be aware of the negative <code>z-index</code> value of <code>-10</code>. <code>html</code> root element default <code>z-index</code> is <code>0</code>. This value must be the smallest <code>z-index</code> to have it as background.</p>


blocks|key|4568857|text|我一直都有同样的问题，但现在它起作用了。我所要做的就是添加background-size:+cover+!important;，它就可以在我的安卓设备上运行了！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4568858|整个代码如下所示：|4568859|body.page-id-8+#art-main+{
++background:+#000000+url("link+to+image")+!important;
++background-repeat:+no-repeat+!important;
++background-position:+50%25+50%25+!important;
++background-attachment:+fixed+!important;
++background-color:+transparent+!important;
++background-size:+cover+!important;
}|code-block|syntax|javascript|4568860|非常感谢@塔兰·德林贝和@文森特！|4568861|entityMap^0|T|Y|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

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

<p>The entire code looks like this:</p>

<pre><code>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;
}
</code></pre>

<p>Thanks a lot @taylan derinbay and @Vincent! </p>


blocks|key|4568904|text|多亏了文森特和Joey+Hayes的努力，我有了这个支持多种固定背景的android+mobile上的codepen。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4568905|HTML：|4568906|<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>|code-block|syntax|javascript|4568907|CSS：|4568908|*+{
++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%25;
++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%25;
++margin:+auto;
++border:+1px+solid+white;
++background:+rgba(255,+255,+255,+0.6);
}

.footer+{
++background:+rgba(2,+2,+2,+0.5);
}|4568909|JS/JQUERY|4568910|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)+%2B1);
++++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#+"+%2B+page+%2B+"+window+position:+"+%2B+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+%7C%7C+low+<=+0+%7C%7C+high+<=+0)+{
++++console.log+("bad+low/high+parameters+in+removeBg");
++}
++for+(var+i=low;+i<=high;+i%2B%2B)+{
++++if+(+i+!=+current+)+{+//+avoid+removing+class+we+are+trying+to+add
++++++if+(el.hasClass('bg-img'+%2Bi+))+{
++++++++el.removeClass('bg-img'+%2Bi+);
++++++}
++++}
++}+
}+//+removeBg()|4568911|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/KerryRuddock/details/zZbvoR/^0|1F|7|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>Thanks to the efforts of Vincent and work by Joey Hayes, I have this <a href="http://codepen.io/KerryRuddock/details/zZbvoR/" rel="nofollow noreferrer">codepen</a> working on android mobile that supports multiple fixed backgrounds </p>

<p>HTML:</p>

<pre><code>&lt;html&gt;

&lt;body&gt;
  &lt;nav&gt;Nav to nowhere&lt;/nav&gt;
  &lt;article&gt;

    &lt;section class="bg-img bg-img1"&gt;
      &lt;div class="content"&gt;
        &lt;h1&gt;Fixed backgrounds on a mobile browser&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/section&gt;

    &lt;section class="solid"&gt;
      &lt;h3&gt;Scrolling Foreground Here&lt;/h3&gt;
    &lt;/section&gt;

    &lt;section&gt;
      &lt;div class="content"&gt;
        &lt;p&gt;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.
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/section&gt;

    &lt;section class="solid"&gt;
      &lt;h3&gt;Scrolling Foreground Here&lt;/h3&gt;
    &lt;/section&gt;

    &lt;section class="footer"&gt;
      &lt;div class="content"&gt;
        &lt;h3&gt;The end is nigh.&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/section&gt;

  &lt;/article&gt;
  &lt;/body&gt;
</code></pre>

<p>CSS:</p>

<pre><code>* {
  box-sizing: border-box;
}

body {
  font-family: "source sans pro";
  font-weight: 400;
  color: #fdfdfd;
}
body &gt; section &gt;.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);
}
</code></pre>

<p>JS/JQUERY</p>

<pre><code>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 &gt;= 0 &amp;&amp; scrollPos &lt; page1Bottom ) {    
      if (! $bgImg.hasClass('bg-img1')) {

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

        removeBg( $bgImg, 1, 3, 2 ); // element, low, high, current
        $bgImg.addClass('bg-img2');
      }
    } else if (scrollPos &gt;= page5Top &amp;&amp; scrollPos &lt;= 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 &gt; high || low &lt;= 0 || high &lt;= 0) {
    console.log ("bad low/high parameters in removeBg");
  }
  for (var i=low; i&lt;=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()
</code></pre>


blocks|key|4568947|text|"background-size:+cover;“在除了Firefox之外的所有移动浏览器上都会导致很多问题！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4568948|这解决了我的问题：|4568949|/*+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;
++++}
}|code-block|syntax|javascript|4568950|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<p>This fixed my issue:</p>

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


blocks|key|62793|text|两天来，我一直忙于使用不同的帖子和方法，试图弄清楚这一点。我敦促任何人从逐个鸡蛋的帖子开始，并摆弄他和其他人建立的codepen。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|62794|这是我找到的唯一适合我的解决方案。我推荐他的答案作为一个解决方案/至少对于那些在我们自己的web应用程序中仍在解决这个问题的人来说是一个很好的起点。|62795|我还没有得到足够的声誉来评论他的帖子，否则我会的。我甚至还不能投票，否则我也会这么做的。|62796|这是我实际使用的代码：|62797|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.*/
}|code-block|syntax|javascript|62798|我用他的原始代码尝试了所有的方法。当我有了|62799|background-position:+center;+|62800|chrome+(最新的android更新，截止到1/8/18)会滞后于更新图片的位置，所以当滚动浏览网站时，浏览器的导航栏/地址栏会出现一块颜色补丁。然后它会在浏览器重新计算图像中心后消失(这是我假设发生的事情)。|62801|因此，我建议像我一样在页脚或页眉周围制作一个图像，并为您的位置设置左上/右上或左下/右下。|62802|总而言之，这对我很有效。所以，如果你读到这里，什么也没有用，那就试一试吧。虽然你现在应该已经点击了原始帖子。|62803|感谢你的鸡蛋，以及你在Codepen上与你合作的其他人。|62804|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

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

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

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

<p>This is the actual code I used:</p>

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

<p>I tried everything with his original code. When I had </p>

<pre><code>background-position: center; 
</code></pre>

<p>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).</p>

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

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

<p>Thank you Eggs, and the other fellows you collaborated with on your Codepen.</p>


blocks|key|62836|text|这就是我所做的，它在所有地方都有效:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|62837|.container+{
++background:+url(${myImage})
++background-attachment:+fixed;
++background-size:+cover;
+transform:+scale(1.1,+1.1);|code-block|syntax|javascript|62838|}|62839|然后..。|62840|@media+only+screen+and+(max-width:+768px){
+++background-size:+100%25+100vh;
}|62841|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This is what i do and it works everythere :) </p>

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

<p>}</p>

<p>then... </p>

<pre><code>@media only screen and (max-width: 768px){
   background-size: 100% 100vh;
}
</code></pre>


blocks|key|62852|text|找到了一个完美的解决方案，可以100%25在移动设备和桌面设备上工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|62853|https://codepen.io/mrinaljain/pen/YObgEP|offset|length|62854|​|62855|.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%25;
++++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%25;
++++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%25;
++++height:+100%25
}

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

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

.video-containers+video,.video-containers+img+{
++++min-width:+100%25;
++++min-height:+100%25;
++++width:+auto;
++++height:+auto;
++++position:+absolute;
++++top:+50%25;
++++left:+50%25;
++++transform:+translate(-50%25,+-50%25)
}|code-block|syntax|javascript|62856|<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%25"+height="100%25"+class="jcl-wrapper"+style="border:+0px;+display:+block;+width:+100%25;+height:+100%25;">
+++++++++++++++++++++++++++++++++++++++<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>|62857|62858|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|14|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|C]]]]

<p>Found a perfect solution for the problem 
100% working on mobile as well as desktop</p>

<p><a href="https://codepen.io/mrinaljain/pen/YObgEP" rel="nofollow noreferrer">https://codepen.io/mrinaljain/pen/YObgEP</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.jpx-is-wrapper {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 314749261;
    width: 100vw;
    height: 300px
}

.jpx-is-wrapper&gt;.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&gt;.jpx-is-container&gt;.jpx-is-content {
    left: 0;
    overflow: hidden;
    right: 0;
    top: 0;
    visibility: visible;
    width: 100%;
    position: relative;
    height: 300px;
    display: block
}

.jpx-is-wrapper&gt;.jpx-is-container&gt;.jpx-is-content&gt;.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&gt;.jpx-is-container&gt;.jpx-is-content&gt;.jpx-is-ad&gt;.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%)
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;

&lt;div class="jpx-is-wrapper"&gt;
                       &lt;div class="jpx-is-container"&gt;
                          &lt;div class="jpx-is-content"&gt;
                             &lt;div class="jpx-is-ad jpx-position-fixed"&gt;
                                   &lt;div scrolling="no" width="100%" height="100%" class="jcl-wrapper" style="border: 0px; display: block; width: 100%; height: 100%;"&gt;
                                       &lt;div class="video-containers" id="video-container"&gt;
                                          &lt;img src="https://via.placeholder.com/350x150" alt="" class=""&gt;
                                       &lt;/div&gt;
                                  &lt;/div&gt;
                             &lt;/div&gt;
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;

&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|62873|text|你可以使用这个标签来使‘固定’定位的元素在移动端很好地工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|62874|++++<meta+name="viewport"+content="width=device-width,+initial-scale=1.0">|code-block|syntax|javascript|62875|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could use this  tag to make 'fixed' positionned element well working on mobile:</p>
<pre><code>    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
</code></pre>


blocks|key|4569097|text|嗯，在我的例子中，我只是使用了这段代码，它起作用了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4569098|@media+(max-width:+768px)+{.classname:before+{
++++content:+"";
++++background-image:+url(link+of+your+image);
++++-webkit-background-size:+cover;
-moz-background-size:+cover;
-o-background-size:+cover;
++++background-repeat:+no-repeat;
++++background-position:+center+center;
++++background-size:+cover;
++++background-attachment:+fixed;
++++z-index:+0;
++++position:+absolute;
++++top:+0;
++++right:+0;
++++bottom:+0;
++++left:+0;|code-block|syntax|javascript|4569099|让它工作的是媒体标签，这是为移动设备添加代码时需要的。|4569100|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Well, in my case, I was just using this code and it worked.</p>
<pre><code>@media (max-width: 768px) {.classname:before {
    content: &quot;&quot;;
    background-image: url(link of your image);
    -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
</code></pre>
<p>What makes it worked is the media tag which is needed when adding a code for mobile devices.</p>


<p>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).</p>

<p>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!</p>

<pre><code>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;
}
</code></pre>


background: fixed no repeat not working on mobile

我正在构建一个网页，我希望背景图像缩放到适合整个屏幕，保持纵横比，并是固定的(因此，如果你向下滚动，背景图像留在相同的地方)。我已经在桌面浏览器中用下面的CSS实现了这一点，但它在iPhone或iPad上不起作用。在这些设备上，背景太大(它继续在折叠下方)，如果你向下滚动足够远，图像将开始重复。有没有人有办法？谢谢!H...

问背景:修复了在移动设备上无法工作的无重复问题
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景:修复了在移动设备上无法工作的无重复问题EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景:修复了在移动设备上无法工作的无重复问题
EN