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

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

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

вопрос
Всем привет столкнулся с такой проблемой сделал фиксированный фон на сайте 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), Ламерские вопросы
  • TeraMoune | Как отключить миниатюры стандартной гале ...
    Фото TeraMoune
    TeraMoune
    Как отключить миниатюры стандартной галереи Fancybox?
    Сегодня, 06:00
    В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

    Например: параметр Thumbs: false отключает миниатюры.
    Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
  • derebas | Как реализовать шифрование трафика? 3
    Фото derebas
    derebas
    Как реализовать шифрование трафика?
    18-11-2024, 16:52
    Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:46
    я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
    Так и было...
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:39
    чтоб не удалять выстави права и пользователя какие там идут на файлы. .
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:37
    т.е. мне снести всё, что я уже загрузил как root, зайти под юзером и закачать снова?
    Видосы в директории upload можно хоть оставить? их там 80 Гб
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:17
    фтп обычный юзер а не root
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:15
    дэк только так и загружаю
  • Gordi | Как реализовать шифрование трафика? 3
    Фото Gordi
    Gordi
    Как реализовать шифрование трафика?
    18-11-2024, 14:14
    я тоже не понимаю....товарищ один, представитель хостинга сказал, что даже есть модули такие специальные под популярные цмс
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:13
    Gordi,
    через фтп загружай
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:11
    Привет Николай!
    Всегда загружал от root... посмотришь может? твой плагин тоже не виден ((
    или направь на путь истинный, пжст
наверх