Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как сделать фиксированный фон на моб. устройствах?

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

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

вопрос
Всем привет столкнулся с такой проблемой сделал фиксированный фон на сайте 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 комментариев

maks
Юзер

maks - 29 октября 2019 11:27 -

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

Alex62 - 29 октября 2019 11:45 -

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

maks - 29 октября 2019 17:10 - 


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
Юзер

Alex62 - 29 октября 2019 18:14 -

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

Alex62 - 29 октября 2019 18:29 -

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

Alex62 - 29 октября 2019 18:30 -

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

maks - 29 октября 2019 18:47 - 

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 например

В общем вариантов не мало, надо смотреть.
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 20.09.2013 Chessman  Общие вопросы по вёрстке
 03.11.2013 dim  Общие вопросы по вёрстке, Стили (CSS)
 26.12.2013 rexwind  Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)
 02.05.2014 psih  Общие вопросы по вёрстке, Стили (CSS)
 23.08.2015 fenix987  Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS), Ламерские вопросы
 07.05.2016 qwertyjkeee  Общие вопросы по вёрстке
 17.12.2016 Railway_Academy  Общие вопросы по вёрстке, Стили (CSS)
 16.08.2017 Ruletk  Общие вопросы по вёрстке, Хаки
 29.03.2018 mewow  Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS), Ламерские вопросы
 18.08.2019 Yan Ivanov  Общие вопросы по вёрстке, Стили (CSS), Ламерские вопросы
  • Nimax | Создание простого сайта отзывов (рейтинг ... 5
    Фото Nimax
    Nimax
    Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
    Вчера, 17:18
    Странный вы, это как минимум в ваших интересах т.к модули с рейтингами для комментариев есть и в паблике, поэтому и хочется посмотреть как это реализовано у вас. Стоимость то не низкая для модуля
  • New-dev.ru | Создание простого сайта отзывов (рейтинг ... 5
    Фото New-dev.ru
    New-dev.ru
    Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
    24-04-2024, 14:14
    А что там на фронте на скрине или демо смотреть? Там в стандартную форму добавления комментария просто добавляется рейтинг, например, звездный.
  • TeraMoune | Сделать модуль опросы 3
    Фото TeraMoune
    TeraMoune
    Сделать модуль опросы
    22-04-2024, 13:32
    Конечно. Пишите в телеграм.
  • Nimax | Сделать модуль опросы 3
    Фото Nimax
    Nimax
    Сделать модуль опросы
    22-04-2024, 13:17
    Да в том и дело =) так и думал можете сделать? сколько будет по стоимости?
  • TeraMoune | Сделать модуль опросы 3
    Фото TeraMoune
    TeraMoune
    Сделать модуль опросы
    22-04-2024, 12:56
    Зачем же для этого модуль ? Есть стандартные опросы, достаточно добавить одну правку на обработку тега в описании новости от стандартного тега poll.
  • Nimax | Создание простого сайта отзывов (рейтинг ... 5
    Фото Nimax
    Nimax
    Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
    22-04-2024, 12:14
    А есть скрины или демо как это на фронте выглядит?
  • New-dev.ru | Создание простого сайта отзывов (рейтинг ... 5
    Фото New-dev.ru
    New-dev.ru
    Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
    21-04-2024, 18:25
    Эта старая публикация, за несколько месяцев цена выросла, а тут забыл исправить цену, сожалею. Сейчас поставил актуальную цену.
  • Nimax | Создание простого сайта отзывов (рейтинг ... 5
    Фото Nimax
    Nimax
    Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
    21-04-2024, 13:18
    Как преобрести за 9$? на сайте цена другая
  • Jigurda | Как в description вставить значение доп. ... 2
    Фото Jigurda
    Jigurda
    Как в description вставить значение доп.поля?
    19-04-2024, 10:54
    Немного не то. Нужно не заменить, а добавить к уже имеющемуся description свой текст с доп.полями
  • lutskboy | Как в description вставить значение доп. ... 2
    Фото lutskboy
    lutskboy
    Как в description вставить значение доп.поля?
    18-04-2024, 21:51
    https://sandev.pro/web/159-fullstory-metatags-by-sander.html
наверх