Исправлен фон на мобильном устройстве

У меня возникли проблемы с установкой фона этой страницы - http://troov.co/team/ (на мобильном устройстве), чтобы фоновое изображение было зафиксировано, и только контент прокручивается вниз.Исправлен фон на мобильном устройстве

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

Я попытался фиксируя ширину и высоту в 100% и положить background-attachment: fixed;

Возможно, я помещаю его в неправильном месте, но ни одно из этих решений не работают. Поистине оцените любую помощь, пожалуйста.

код CSS выглядит следующим образом:

.container-fluid.team { 
    background-image: url(../images/bg_teampage.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
}

источник

2015-02-06 Sean Stevens

, пожалуйста, включите соответствующий код в свой вопрос в дополнение к ссылке – JRulle

Сделаем, спасибо за отзыв. –

применить фиксированный фон к body:

body { 
    background-image: url(../images/bg_teampage.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    background-attachment: fixed; 
}

источник

2015-02-06 15:01:06 JRulle

Это сработало, спасибо! –

Хотя ваш фон фиксирована, ДИВ он применяется к не. Вы можете установить, что команда «контейнер-жидкость» должна быть абсолютной по абсолютной величине, и делать некоторые материалы z-index, или вы можете прикреплять фиксированное фоновое изображение к телу документа.

источник

2015-02-06 14:59:30 jdu

Если вы хотите сохранить background-image внутри .container-fluid можно добавить position:fixed и overflow-y: scroll в .container-fluid.team так:

.container-fluid.team { 
    background-image: url(../images/bg_teampage.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    overflow-y: scroll; 
}

В противном случае я бы» ve переместил фон на body.

источник

2015-02-06 15:05:53 Topr

Добавьте следующие стили CSS:

body{ 
    overflow:hidden; 
    } 

.container-fluid.team { 
background-image: url(../images/bg_teampage.jpg); 
background-repeat: no-repeat; 
background-size: cover; 
width: 100%; 
height: 163%; 
}

источник

2015-02-06 15:13:20 rJ7

Я знаю старого жука с IOS Safari, где они не поддерживают background-attachment: attached;, но я думал, что они исправили эту ошибку в год или около того назад. Не возражаете ли вы рассказать нам, какое устройство/ОС/браузер вы тестируете?

Я использую попытку исправить эту проблему, создав полный размер div и отправив его обратно (отрицательный индекс z).

HTML

<body> 
    <div id='background'></div> 
    <!-- Actual Page Content Here --> 
</body>

CSS

#background { 
    background-image: url(path/to/image.jpg); 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -999999999; 
}

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

Проверьте плагин jQuery backstretch.

источник

2015-02-06 15:25:15

Исправлен фон на мобильном устройстве

ответ

Смежные вопросы