Фон: исправлено отсутствие повторения не работает на мобильном телефоне

Я создаю веб-страницу, где я хочу, чтобы фоновое изображение масштабировалось по всему экрану, поддерживало соотношение сторон и фиксировалось (поэтому, если вы прокручиваете вниз, фоновое изображение остается в одном месте).

Я достиг этого в настольных браузерах с 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;
}

ОТВЕТЫ

Ответ 1

Я нашел отличное решение для фиксированных фонов на мобильных устройствах, не требующих вообще никакого 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, чтобы иметь его как фон.

Ответ 2

У меня было очень простое решение для этого, после борьбы со всеми методами исправления этого.

У меня была проблема с моими мобильными устройствами 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 не принимает "фиксированный", он возвращается к значению по умолчанию, которое он принимает, прокручивает.

Это работало для меня на каждом устройстве. Надеюсь, это поможет и другому.

Ответ 3

background-attachment:fixed в IOS Safari была известна ошибка до тех пор, как я могу вспомнить.

Вот некоторые другие варианты для вас:

fooobar.com/questions/14535/...

Поскольку фиксированная позиция вообще не настолько стабильна при прикосновении (что больше, чем другие, 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 предполагает сначала мобильный:

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

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

Ответ 4

Благодаря усилиям Винсента и работы Joey Hayes, у меня есть этот 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()

Ответ 5

Я думаю, что мобильные устройства не работают с фиксированными позициями. Вы должны попробовать с помощью некоторого js-плагина, например skrollr.js(например). С помощью такого типа плагина вы можете выбрать положение своего div (или что-то еще) в функции положения полосы прокрутки.

Ответ 6

Фиксированное позиционирование поддерживается на мобильных устройствах с Android 2.2 и iOS 5.

Вам нужно использовать устройство с окном просмотра на мета и дать фоновое изображение где-нибудь с идентификатором. Затем вы получите этот id с jquery и дадите высоту. И, конечно, 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/

Ответ 7

См. мой ответ на этот вопрос: Обнаружение поддержки фонового вложения: исправлено?

  • Обнаружение сенсорных возможностей само по себе не работает для ноутбуков с сенсорными экранами, а код для обнаружения прикосновений Кристины не срабатывает на некоторых устройствах.
  • Ответ на Гектор будет работать, но анимация будет очень изменчивой, поэтому будет лучше заменять фиксированную прокрутку на устройствах, которые не поддерживают фиксированные.
  • К сожалению, Taylon неверен, что iOS 5+ поддерживает привязку к фону: исправлено. Это не. Я не могу найти список устройств, которые не поддерживают фиксированные фоны. Вероятно, большинство мобильных телефонов и планшетов этого не делают.

Ответ 8

У меня была такая же проблема, но теперь она работает. Все, что мне нужно было сделать, это добавить 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!

Ответ 9

Я опаздываю на вечеринку, но это (невероятно) все еще проблема с 11.05.2017. Вот простое решение, которое также будет работать кросс-платформенный с линейными градиентами:

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

Ответ 10

Я нашел возможно лучшее решение для эффекта parallax, который работает на всех устройствах.

Главное - установить все разделы с z-index больше, чем параллакс.

И элемент изображения параллакса для установки фиксированного с максимальной шириной и высотой

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

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

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>
<section class="yellow"></section>

Ответ 11

"background-size: cover;" вызывает множество проблем во всех мобильных браузерах, кроме 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;
    }
}

Ответ 12

В течение двух дней я пытался использовать разные сообщения и методы, пытаясь понять это. Я настоятельно призываю всех к СНВ, посмотрев сообщение на Яйца, и возиться с кодепином, который он и другие создали.

Это было единственное решение для меня, которое я нашел. Я рекомендую его ответ в качестве решения/хорошей отправной точкой для тех, кто из нас все еще выясняет эту проблему в наших собственных веб-приложениях.

Я еще не получил достаточно репутации, чтобы прокомментировать его сообщение, иначе я бы это сделал. Я даже не могу голосовать, но я тоже это сделаю.

Это фактический код, который я использовал:

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) будет отставать от обновления положения изображения, поэтому при прокрутке веб-сайта будет патч цвета, где находится моя панель навигации/URL-адреса браузера. Затем он исчезнет после того, как браузер пересчитает центр изображения (это то, что я предполагаю, происходит).

Итак, я рекомендую сделать изображение вокруг нижнего колонтитула или заголовка, как я, и установить верхний левый/правый или нижний левый/правый для вашей позиции.

В заключение, ЭТО РАБОТАЕТ для меня. Поэтому попробуйте, если вы читаете это далеко, и ничего еще не сработало. Хотя вы уже должны были ударить исходный пост.

Спасибо, Яйца, и других товарищей, с которыми вы сотрудничали на своем Кодепене.