Проблема с задним фоном на мобильных устройствах

@_Nigilist_ · Регистрация: 26.11.2018

Author24 — интернет-сервис помощи студентам

Здравствуйте, уже который день бьюсь головой об фоновое изображение на сайте.
Проблема в том, что на ноутбуках изображение растягивается нормально и все хорошо, а вот на смартфонах...
На смартфоне изображение почему-то зависит напрямую от высоты body то бишь, когда наполняешь сайт изображение начинает все больше ухудшаться (разьезжаться)

CSS

body{
        /* Adaptive Background */
        width: 100%;
        color:gold;
        height: 100000px;
        /* Фон */
        background-image: url("Images/Background/Background.jpg");
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background:gray();
 
 
}

@Ademar · 28.11.2018, 16:21

а зачем у body height: 100000px; ?

@gogolik · 28.11.2018, 18:22

Вопрос уже неоднократно поднимался на форуме. Ну не поддерживают мобильные браузеры background-attachment: fixed. Тык.

@_Nigilist_ · 28.11.2018, 22:24 **[ТС]**

height: 10000px это имитация заполненности контента

Добавлено через 1 минуту

Сообщение от gogolik

Вопрос уже неоднократно поднимался на форуме. Ну не поддерживают мобильные браузеры background-attachment: fixed. Тык.

Подскажите глупому студенту, как тогда сделать задний фон на мобилках?
Заранее спасибо)

@gogolik · 29.11.2018, 08:21

_Nigilist_, background-attachment: fixed; попробуйте убрать.

@_Nigilist_ · 29.11.2018, 11:48 **[ТС]**

Сообщение от gogolik

_Nigilist_, background-attachment: fixed; попробуйте убрать.

Убрал background-attachment:fixed. Увы не помогло. Фон остался размытым((

@gogolik · 29.11.2018, 11:54

_Nigilist_, картинку фона скиньте.

@_Nigilist_ · 29.11.2018, 12:23 **[ТС]**

Сообщение от gogolik

_Nigilist_, картинку фона скиньте.

CSS

   body{
        width: 100%;
        height: auto;
        color:gold;
        background-image: url("Images/Background/Background.jpg");
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-attachment: fixed;
        background-position: center center;
        /*background-attachment: fixed;*/
        background-repeat: no-repeat;
        background:gray();
        margin: 0;
        padding: 0;
 
 
 
}

@gogolik · 29.11.2018, 14:01

_Nigilist_, сам файл.

У вас если высота фона, условно, 1000px, то при вытягивании на 4000px, конечно, будет такая лажа.
Наглядно - здесь. Меняйте высоту и поймете, о чем я.

@_Nigilist_ · 30.11.2018, 15:32 **[ТС]**

Сообщение от gogolik

_Nigilist_, сам файл.

У вас если высота фона, условно, 1000px, то при вытягивании на 4000px, конечно, будет такая лажа.
Наглядно - здесь. Меняйте высоту и поймете, о чем я.

Что тогда посоветуете сделать, ведь у меня будет много контента и разумеется фон растянется и больше 4.000px. Неужели я никак не могу сохранить стилистику сайта на мобильных устройствах (оставить этот фон)?

@_Nigilist_ · 30.11.2018, 15:37 **[ТС]**

Сообщение от _Nigilist_

CSS

   body{
        width: 100%;
        height: auto;
        color:gold;
        background-image: url("Images/Background/Background.jpg");
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-attachment: fixed;
        background-position: center center;
        /*background-attachment: fixed;*/
        background-repeat: no-repeat;
        background:gray();
        margin: 0;
        padding: 0;
 
 
 
}

Вот фон который вы просили

@Ademar · 30.11.2018, 15:57

Прикрепил архив. Проверил на своём смартфоне. Работает.

@Ademar · 30.11.2018, 16:00

там только body и абзацы
проверь на своём смартфоне
начни с этого, потом добавляй остальное

если не поможет - скинь ссылку на свою страницу или архив
я посмотрю

@_Nigilist_ · 30.11.2018, 16:47 **[ТС]**

Сообщение от Ademar

там только body и абзацы
проверь на своём смартфоне
начни с этого, потом добавляй остальное

если не поможет - скинь ссылку на свою страницу или архив
я посмотрю

Залил на хост ваш тест, вот что получилось(

@Ademar · 30.11.2018, 17:00

Проблема была в назафиксированном фоне? Или ещё и с размерами?

@_Nigilist_ · 30.11.2018, 17:07 **[ТС]**

Сообщение от Ademar

Проблема была в назафиксированном фоне? Или ещё и с размерами?

Я так понимаю что да, скорее всего дело в отсутствии фиксации. Ведь изображение начинает ухудшаться по мере заполнения контентом (меняется высота и оно увеличивается) Причем если смотреть через код элемента как оно на телефоне, то все более чем хорошо.

@Ademar · 30.11.2018, 17:08

добавь в стили вот это

CSS

      @media (max-width: 767px) {
        html,body{
          height: 100%;
        }
        body{
            -webkit-background-size: auto 100vh;
            -moz-background-size: auto 100vh;
            -o-background-size: auto 100vh;
            background-size: auto 100vh;
        } 
      }

@_Nigilist_ · 30.11.2018, 17:27 **[ТС]**

Сообщение от Ademar

добавь в стили вот это

CSS

      @media (max-width: 767px) {
        html,body{
          height: 100%;
        }
        body{
            -webkit-background-size: auto 100vh;
            -moz-background-size: auto 100vh;
            -o-background-size: auto 100vh;
            background-size: auto 100vh;
        } 
      }

Вставил. Без изменений((

@_Nigilist_ · 04.12.2018, 16:44 **[ТС]**

Может у кого-то еще есть предложения?

@_Nigilist_ · 07.12.2018, 20:18 **[ТС]**

Вообще никак???)))

@Ademar 26 / 18 / 10 Регистрация: 26.11.2012 Сообщений: 183
	30.11.2018, 16:00	13
	там только body и абзацы проверь на своём смартфоне начни с этого, потом добавляй остальное если не поможет - скинь ссылку на свою страницу или архив я посмотрю 0

@_Nigilist_ 1 / 1 / 0 Регистрация: 26.11.2018 Сообщений: 12
	04.12.2018, 16:44 [ТС]	19
	Может у кого-то еще есть предложения? 0

Новые блоги и статьи
Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .	Полезные поделки на Arduino, которые можно сделать самому raxper 06.01.2025 Arduino как платформа для творчества Arduino представляет собой удивительную платформу для технического творчества, которая открывает безграничные возможности для создания уникальных проектов. Эта. . .	Подборка решений задач на Python IT_Exp 06.01.2025 Целью данной подборки является предоставление возможности ознакомиться с различными задачами и их решениями на Python, что может быть полезно как для начинающих, так и для опытных программистов. . . .
С чего начать программировать микроконтроллеры raxper 06.01.2025 Введение в мир микроконтроллеров Микроконтроллеры стали неотъемлемой частью современного мира, окружая нас повсюду: от простых бытовых приборов до сложных промышленных систем. Эти маленькие. . .	Из чего собрать игровой компьютер inter-admin 06.01.2025 Сборка игрового компьютера требует особого внимания к выбору комплектующих и их совместимости. Правильно собранный игровой ПК не только обеспечивает комфортный геймплей в современных играх, но и. . .	Обновление сайта www.historian.by Reglage 05.01.2025 Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .	Как использовать GraphQL в C# с HotChocolate Programming 05.01.2025 GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .	Модель полного двоичного сумматора с помощью логических операций (python) AlexSky-coder 04.01.2025 def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()	Это мы не проходили, это нам не задавали...(асихронный счётчик с управляющим сигналом зад Hrethgir 04.01.2025 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .

@Ademar 26 / 18 / 10 Регистрация: 26.11.2012 Сообщений: 183
	28.11.2018, 16:21	2
	а зачем у body height: 100000px; ? 0

@gogolik Monsieur Toxicité 2843 / 1892 / 813 Регистрация: 13.03.2010 Сообщений: 6,179
	28.11.2018, 18:22	3
	Вопрос уже неоднократно поднимался на форуме. Ну не поддерживают мобильные браузеры `background-attachment: fixed`. Тык. 0

@_Nigilist_ 1 / 1 / 0 Регистрация: 26.11.2018 Сообщений: 12
	28.11.2018, 22:24 [ТС]	4
	height: 10000px это имитация заполненности контента Добавлено через 1 минуту Сообщение от gogolik Вопрос уже неоднократно поднимался на форуме. Ну не поддерживают мобильные браузеры `background-attachment: fixed`. Тык. Подскажите глупому студенту, как тогда сделать задний фон на мобилках? Заранее спасибо) 0

@gogolik Monsieur Toxicité 2843 / 1892 / 813 Регистрация: 13.03.2010 Сообщений: 6,179
	29.11.2018, 08:21	5
	_Nigilist_, `background-attachment: fixed;` попробуйте убрать. 0

@_Nigilist_ 1 / 1 / 0 Регистрация: 26.11.2018 Сообщений: 12
	29.11.2018, 11:48 [ТС]	6
	Сообщение от gogolik _Nigilist_, `background-attachment: fixed;` попробуйте убрать. Убрал background-attachment:fixed. Увы не помогло. Фон остался размытым(( 0

@gogolik Monsieur Toxicité 2843 / 1892 / 813 Регистрация: 13.03.2010 Сообщений: 6,179
	29.11.2018, 11:54	7
	_Nigilist_, картинку фона скиньте. 0

@gogolik Monsieur Toxicité 2843 / 1892 / 813 Регистрация: 13.03.2010 Сообщений: 6,179
	29.11.2018, 14:01	9
	_Nigilist_, сам файл. У вас если высота фона, условно, 1000px, то при вытягивании на 4000px, конечно, будет такая лажа. Наглядно - здесь. Меняйте высоту и поймете, о чем я. 0

@_Nigilist_ 1 / 1 / 0 Регистрация: 26.11.2018 Сообщений: 12
	30.11.2018, 15:32 [ТС]	10
	Сообщение от gogolik _Nigilist_, сам файл. У вас если высота фона, условно, 1000px, то при вытягивании на 4000px, конечно, будет такая лажа. Наглядно - здесь. Меняйте высоту и поймете, о чем я. Что тогда посоветуете сделать, ведь у меня будет много контента и разумеется фон растянется и больше 4.000px. Неужели я никак не могу сохранить стилистику сайта на мобильных устройствах (оставить этот фон)? 0

@_Nigilist_ 1 / 1 / 0 Регистрация: 26.11.2018 Сообщений: 12
	30.11.2018, 16:47 [ТС]	14
	Сообщение от Ademar там только body и абзацы проверь на своём смартфоне начни с этого, потом добавляй остальное если не поможет - скинь ссылку на свою страницу или архив я посмотрю Залил на хост ваш тест, вот что получилось( Миниатюры 0

@Ademar 26 / 18 / 10 Регистрация: 26.11.2012 Сообщений: 183
	30.11.2018, 17:00	15
	Проблема была в назафиксированном фоне? Или ещё и с размерами? 0

@_Nigilist_ 1 / 1 / 0 Регистрация: 26.11.2018 Сообщений: 12
	30.11.2018, 17:07 [ТС]	16
	Сообщение от Ademar Проблема была в назафиксированном фоне? Или ещё и с размерами? Я так понимаю что да, скорее всего дело в отсутствии фиксации. Ведь изображение начинает ухудшаться по мере заполнения контентом (меняется высота и оно увеличивается) Причем если смотреть через код элемента как оно на телефоне, то все более чем хорошо. Миниатюры 0

@_Nigilist_ 1 / 1 / 0 Регистрация: 26.11.2018 Сообщений: 12
	07.12.2018, 20:18 [ТС]	20
	Вообще никак???))) 0