contexte: fixe aucune répétition ne fonctionne pas sur mobile

J'ai trouvé une excellente solution pour les formations sur les appareils mobiles nécessitant pas de 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;
}

S'il vous plaît être conscient du négatif z-index valeur de -10. html de l'élément racine par défaut z-index est 0. Cette valeur doit être la plus petite z-index pour l'avoir comme arrière-plan.

Trouvé une solution parfaite pour le problème
100% de travail sur le mobile ainsi que de de bureau

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

CSS:

.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%)
}

HTML:

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

Grâce aux efforts de Vincent et de travail par Joey Hayes, j'ai cette codepen de travail sur android mobile qui prend en charge plusieurs fixe milieux

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

"background-size: cover;" pose beaucoup de questions sur tous les navigateurs, sauf Firefox!

Cela a réglé mon problème:

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

J'ai trouvé peut-être la meilleure solution pour parallaxe effet sur tous les appareils.

Chose principale est de définir toutes les sections avec z-index plus grande que la parallaxe de la section.

Et image de parallaxe élément fixe avec max de largeur et de hauteur

CSS:

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

HTML:

<section class="blue"></section>
<section class="parallax">
<div class="image"></div>
</section>
<section class="red"></section>

Correction du positionnement est pris en charge sur mobile depuis Android 2.2 et iOS 5.

Vous avez besoin pour utiliser l'appareil-avec fenêtre d'affichage sur meta et de donner l'image d'arrière-plan avec quelque part avec un id. Vous obtiendrez d'identification avec jquery et lui donner une hauteur. Et bien sûr, 100% de la largeur de

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

J'ai eu le même problème, mais maintenant ça fonctionne.
Tout ce que j'avais à faire était d'ajouter background-size: cover !important; et il fonctionne sur mon appareil Android!

L'ensemble du code ressemble à ceci:

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

Merci beaucoup @taylan derinbay et @Vincent!