Исправлена ​​ошибка, из-за которой фоновое изображение не работало на iPad и iPhone.

У меня есть пара проблем, связанных с фоновыми изображениями в Safari на ios (iPad / iPhone). Все работает нормально на обычных браузерах. Изображение должно быть исправлено и заполнить экран.

  1. На ios-safari фоновое изображение отображается и остается зафиксированным сзади. Однако высота изображения как-то определяется высотой содержимого. Это означает, что когда у меня мало контента на странице, изображение отображается правильно, но когда у меня длинный контент, я вижу только верхнюю часть фонового изображения (изображение растягивается, но сохраняет правильное соотношение).
  2. Код js для переключения фоновых изображений ничего не делает в ios-safari.

Вот мой HTML

<html>

<head>
    Some head stuff
</head>

<body>

    <div class="pagewrap">

        <header class="header">
            <div class="menu">
                Some header stuff
            </div>
        </header>

            <div class="full-page-background fullheight"></div>

        <div class="wrap">

            <div class="main">
                Some content
            </div>

        </div>

        <aside class="sidebar">
            <nav class="mobnav">
                My mobile nav
            </nav>
        </aside>

    </div>

    <div class="custom-background">
        A placeholder for a custom background image
    </div>

</body>

</html>

Вот CSS для.full-page-background

.full-page-background {
    background: url(/Content/Vixen/img/background02.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:top center;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    position: fixed;
    width: 100%;
    z-index: 1;
}

Вот js для.fullheight, чтобы убедиться, что он заполняет высоту окна браузера.

$(document).ready(function() {
    var bodyheight = window.innerHeight ? window.innerHeight:$(window).height(); 
    $(".fullheight").height(bodyheight);
});

// for the window resize
$(window).resize(function() {
    var bodyheight = window.innerHeight ? window.innerHeight:$(window).height(); 
    $(".fullheight").height(bodyheight);
});

Вот js для.custom-background - если в div есть изображение (помещенное пользователем в cms), оно переключает изображение по умолчанию на новое. Хорошо работает на рабочем столе, но ничего не делает на ios-safari.

$(".background-image").each(function() {  
    imgsrc = this.src;

    $('.full-page-background').css({
        background:'url(' + imgsrc +') no-repeat fixed center center / cover  transparent'
    });
});
Источник

1 ответ

Решение

Я нашел этот плагин здесь:

http://srobbin.com/jquery-plugins/backstretch/

Кажется, он хорошо работает для полноразмерных фоновых изображений на всех устройствах (все, что я проверял, это!). Который включает в себя Safari на IOS.

Источник
Другие вопросы по тегам