Как сделать фиксированный фон на моб. устройствах?

Alex62 28.10.2019 фиксированный фон Общие вопросы по вёрстке, Стили (CSS), Ламерские вопросы 2350

вопрос

Всем привет столкнулся с такой проблемой сделал фиксированный фон на сайте background fixed , проблема в следующем на пк и ноутбуке фон фиксируется,а на мобильном телефоне прокручивается вместе с основной страницей,а на мобильных устройствах iphone вообще нет катринки. Для айфонов создал отдельное css просто убрал значение fixed и картинка появилась.Подскажите как реализовать фиксированный фон для мобильных устройств и устройств iphone.Мои стили ниже.


header {    
overflow: hidden;
float: left;
width: 100%;
-moz-background-size: 100%;
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-size: cover!important;
position: relative;
background: url(../images/header-fon.jpg) fixed;
}

Ответа пока нет

7 комментариев

Юзер

697

maks - 2019-08-1829 октября 2019 11:27 - #73727

float и overflow и size 100% не нужен. position fixed, size cover и no-repeat добавь к фону

Юзер

Alex62 - 2019-08-1829 октября 2019 11:45 - #73728

Дружище можешь подробнее скинуть кусок css потому что либо твой комментарий опубликовался не полностью либо я что то не допонял( С телефона смотрю написано одно, а с пк твой комментарий уже другой, странно что-то

Юзер

697

maks - 2019-08-1829 октября 2019 17:10 - #73740


header {
    position: fixed;
    background: url(../images/header-fon.jpg);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

Юзер

Alex62 - 2019-08-1829 октября 2019 18:14 - #73741

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

Юзер

Alex62 - 2019-08-1829 октября 2019 18:29 - #73742

вот как было на яндекс диск залил
видео

Юзер

Alex62 - 2019-08-1829 октября 2019 18:30 - #73743

а вот как стало после новых стилей
видео 2

Юзер

697

maks - 2019-08-1829 октября 2019 18:47 - #73744

header::before {
    content: " ";
    position: fixed;
    background: url(../images/header-fon.jpg);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

или

header::before {
    content: " ";
    position: relative;
    background: url(../images/header-fon.jpg);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

или

header {
    position: relative;
    background: url(../images/header-fon.jpg);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

или делай у контента отступ margin-top:300px например

В общем вариантов не мало, надо смотреть.

non-stop | Как решить проблему индексации DLE в пои ... ¹

non-stop
Как решить проблему индексации DLE в поиске Bing?
19-12-2024, 17:02

Забыл написать что обновился до последней версии 17.3
Интересно узнать, это только у меня проблема, или это проблема движка? проверьте свои сайты на наличие в поиске Bing.
В 11 винде именно эта поисковая система стоит по умолчанию . кроме того эта же поисковая система отвечает за индекс еще одного поисковика - yahoo. Эти системы могут давать дополнительный процент пискового трафика на сайты.
lutskboy | Как максимально грамотно организовать до ... ¹

lutskboy
Как максимально грамотно организовать добавление материалов через SQL-запросы?
18-12-2024, 21:39

все верно. related_ids автоматом заполняется потом.
derebas | Убираем xfsearch из адресной строки ⁷

derebas
Убираем xfsearch из адресной строки
16-12-2024, 02:35

в правилах транслитерации для tagvalue поставьте замену " " => "-", например так
str_replace(array('.', ' ', '/', '&', "'", '+', '«', '»', ':', '!'), array('', '-', '-', 'and', '', '', '', '', '', '')
toxicpioner | Убираем xfsearch из адресной строки ⁷

toxicpioner
Убираем xfsearch из адресной строки
15-12-2024, 19:31

если в доп поле есть пробел, будет выдавать просто 403 стр
dj-avtosh | Воспользовался хаком удаление html из ад ... ²

dj-avtosh
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
12-12-2024, 17:26

Нужно правило с year поднять выше всех в .htaccess
TeraMoune | Воспользовался хаком удаление html из ад ... ²

TeraMoune
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
11-12-2024, 22:12

У вас убрано слишком много отличительных признаков в ссылках и теперь ссылки пересекаются. Убрали xfsearch, убрали html, а так же зачем то убрали дефиз разделяющий id и alt_name. Теперь некоторые ссылки будут отвечать выражению под правила ссылок новостей. Исправить вы можете только переосмыслив эти ссылки и добавить в них каких-то отличительных особенностей, переосмыслить чпу.
toxicpioner | Как упорядочить ID новостей ¹⁹

toxicpioner
Как упорядочить ID новостей
9-12-2024, 22:24

***Комментарий удален***
DnCnv | Как показать только одну категорию, к ко ... ¹

DnCnv
Как показать только одну категорию, к которой принадлежит новость?
9-12-2024, 01:46

***Комментарий удален***
web102 | Почему не отображается картинка в галере ... ³

web102
Почему не отображается картинка в галерее?
4-12-2024, 11:49

дайте адрес сайта. можно в личку
Shandi | Почему не отображается картинка в галере ... ³

Shandi
Почему не отображается картинка в галерее?
3-12-2024, 08:53

Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?