Css background cover не работает

background-size: cover — не правильно работает на мобильных девайсах

Здравствуйте, уважаемые знатоки! Такая проблемка: на некоторых мобильных девайсах, фон прорисовывается не полностью.

скрин: http://prntscr.com/781vxs В чем может быть проблема и как ее решить?

3 ответа 3

Попробуйте такой варинат

У меня заработало после того как я убрал свойство background-repeat: no-repeat; В принципе оно и не нужно при background-size: cover;

Обычно такое происходит, когда используется width: 100% у фоновой картинки или у родительского элемента. Т.к. такая ширина будет рассчитана на основе ширины экрана на устройстве в вашем случае.

На странице у вас видимо есть элемент, у которых width больше чем 100% (ширина экрана) и есть возможность прокрутить контент влево/вправо (может быть лишний padding или margin стоит, или фиксированная ширина у какого-то элемента есть).

Чтобы от этого избавиться добавьте min-width для фона равную минимальной ширине, которую хотите установить, или поправьте элементы, которые вылезают.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css3 адаптивная-верстка или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.15.40479

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Не работает cover в background-size

Я работаю под FireFox последней версии, поэтому -moz-background-size:cover; не использую, который нужно было использовать до версии 4.0 FireFox.
В браузерах Хром, IE, при нахождении файла-фона в каталоге рядом со страницей, и при изображении jpg или png – вид тот же: ширина во весь экран, а по высоте показывается верхняя часть фона (где-то 1/3 изображения или 1/4), при «background:url(‘img1.jpg’) 50% 50% no-repeat;» — выводится средняя часть изображения. Как сделать полное изображение по вертикали?

Добавлено через 35 минут
Если имя файла картинки поместить в одинарные кавычки – то же самое.

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Background-size cover не работает
Фоновое изображение не хочет нормально адаптивиться, мне нужно чтобы высота изображения была.

Background-size: cover и contain. В чём разница?
Приветствую! Цитирую: cover Масштабирует изображение с сохранением пропорций так, чтобы его.

Background-size неправильно работает в Firefox
Вы скорее всего уверенны что я что то делаю не правильно. Конечно, ведь свойство не новое и хорошо.

Источник

фон: исправлено, не повторять, не работает на мобильном телефоне

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

Я добился этого в настольных браузерах с помощью CSS ниже, но это не работает на iPhone или iPad. На этих устройствах фон слишком большой (он продолжается ниже сгиба), и если вы прокрутите его достаточно далеко, изображение начнет повторяться. У кого-нибудь есть решение? Спасибо!

14 ответов

Я нашел отличное решение для фиксированных фонов на мобильных устройствах, не требующее JavaScript вообще.

Обратите внимание на отрицательное значение z-index для -10 . html корневой элемент по умолчанию z-index равно 0 . Это значение должно быть наименьшим z-index , чтобы иметь его в качестве фона.

У меня было очень простое решение для этого, после того, как я боролся со всеми способами исправить это.

У меня была проблема на моих мобильных устройствах IOS.

css (рабочий стол)

Затем я перезаписываю его медиа-запросом, удаляя «исправлено» как фоновое вложение.

css (для мобильных устройств)

initial — устанавливает для этого свойства значение по умолчанию. Я думаю, потому что IOS не принимает «исправлено», оно возвращается к значению по умолчанию, которое он принимает, прокрутка.

Это работало для меня на каждом устройстве. Надеюсь, это поможет кому-то еще.

background-attachment:fixed в IOS Safari, насколько я помню, была известной ошибкой.

Вот еще несколько вариантов для вас:

Так как фиксированное положение в целом не так уж и стабильно на ощупь (некоторые больше, чем другие, Chrome отлично работает), оно все еще работает в Safari IOS 8 в ситуациях, которые раньше работали в IOS 7, поэтому я обычно просто используйте JS для обнаружения сенсорных устройств, включая Windows Mobile.

Пример CSS вначале предполагает использование мобильного телефона:

Благодаря усилиям Винсента и работ Джои Хейса у меня есть этот codepen работает на Android Mobile, который поддерживает несколько фиксированных фонов

«background-size: cover;» вызывает много проблем во всех мобильных браузерах, кроме Firefox!

Это исправило мою проблему:

Два дня я был занят, используя разные посты и методы, пытаясь понять это. Я призываю любого НАЧАТЬ, посмотрев на сообщение Эггса, и покопаться в коде, который он и другие создали.

Это было единственное решение, которое мне помогло, и которое я нашел. Я рекомендую его ответ как решение /как минимум хорошую отправную точку для тех из нас, кто до сих пор разбирается в этой проблеме в наших собственных веб-приложениях.

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

Это фактический код, который я использовал:

Я попробовал все с его оригинальным кодом. Когда я имел

chrome (в последнем обновлении Android от 1/8/18) будет отставать при обновлении положения изображения, поэтому при прокрутке веб-сайта может появиться цветное пятно там, где была моя навигационная панель /панель URL браузера. Затем он исчезнет после того, как браузер пересчитает центр изображения (как я полагаю, происходило).

Итак, я рекомендую сделать изображение вокруг нижнего колонтитула или заголовка, как я сделал, и установить верхнее левое /правое или нижнее левое /правое для вашей позиции.

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

Спасибо, Яйца, и другим товарищам, с которыми вы сотрудничали на вашем Codepen.

Я нашел, возможно, лучшее решение для эффекта параллакса , который работает на всех устройствах .

Главное, чтобы все секции имели z-index больше, чем секция параллакса.

И элемент изображения параллакса, чтобы установить фиксированный с максимальной шириной и высотой

Источник

Трабл с фоном в css, background-size: cover обрезает картинку по высоте

Что я только не делал и размеры картинки вводил, background-attachment: contain показывает всю картинку целиком, но фоновая картинка в этом случае не растягивается по всему экрану, а как только ввожу background-size: cover, то картинка растягивается по ширине, но обрезается по высоте, скролл работает по оси х и у, но вот картинка обрезается по высоте.

Помогите решить проблему, мне нужно чтобы картинка не обрезалась в высоту и скроллом прокручивалась та часть, которая не влезает в высоту

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Не работает cover в background-size
Проверка background-size: cover 5 1

Пишу сказать, что проблему решил, прописав код :

И всё заработало как надо, но мне кажется, что есть другие более грамотные решения этой проблемы.

Я знаю, что если поставить высоту 100%, то страница будет ограничена окном браузера, а если значение будет равняться пиксельной высоте фона, то фон будет обрезаться. Медиазапрос по высоте моего фона не решил мою проблему. Также
знаю, что надо было задать размер блока для отображения фона целиком, но моя задача состояла в том, чтобы на данном
этапе один только фон отображался целиком с сохранением всех пропорций со скроллом. Есть ли у кого идеи как можно
ещё более грамотно решить мою проблему, уверен есть и другие более грамотные способы.

Красивый background с зеленым фоном без картинки
Вот к примеру есть картинка . Как мне сделать что то похожее с background , но чтобы без.

Background-size сильно растягивает фон
Проблема заключается в том, что параметр background-size:cover сильно растягивает фон, т.е. больше.

Background-size c svg изображениями в safari
Здравствуйте! Кто-нибудь знает как заставить сафари правильно отображать svg в background? Вот.

Background-size неправильно работает в Firefox
Вы скорее всего уверенны что я что то делаю не правильно. Конечно, ведь свойство не новое и хорошо.

Как узнать размеры background-size: contain ?
Доброй ночи! Есть блок с background-size: contain. Размеры блока известны, размеры оригинальной.

Источник

Почему CSS background-size: cover не работает в портретном режиме на iOS?

Я пытаюсь настроить вручную splash-image на всех устройствах. Я делаю это, проверяя orientation (сенсорных устройств) или screen width vs. screen height (нет касания) и установите url соответственно.

затем я добавляю это правило CSS через Javascript:

С x быть изображением, котор нужно нагрузить в зависимости от ориентации и размера экрана.

моя проблема в том, что это отлично работает в landscape режим, но на моем iPad в portrait режим, загружается правильное изображение (различаются в зависимости от портрет / пейзаж), но он не расширен до полноэкранного размера.

вопрос:
Могу ли я не использовать CSS background-size на iOS в портретном режиме?

Спасибо за помощь!

EDIT:
Просто попробовал на своем смартфоне Android. Отлично работает. Не имеет смысла, почему он не работает на iPad.

5 ответов

при проверке ориентации обратите внимание на эти моменты из документа apple —

Обеспечить Запуск Изображения :

iPhone-только приложения может иметь только одно изображение для запуска. Он должен быть в формате PNG и измерять 320 x 480 пикселей. Имя образа запуска файл по умолчанию.формат PNG.

iPad-только приложения: создайте изображение запуска для каждой поддерживаемой ориентации в формате PNG. Каждый изображение запуска должно быть 1024 x 748 пикселей (для ландшафта) или 768 X 1004 пикселей (для портрета).

универсальные приложения: включить изображения запуска для iPhone и iPad.

Обновление Информации.параметры файла plist укажите значения для UISupportedInterfaceOrientations и UIInterfaceOrientation

не все браузеры распознают ключевое слово cover для background-size, и в результате просто игнорируйте его.

таким образом, мы можем преодолеть это ограничение установка размера фона до 100% ширины или высоты, в зависимости от ориентации. Мы можем нацелить текущую ориентацию (а также устройство iOS, используя ширину устройства). С этими двумя пунктами, я думаю, вы можете использовать CSS background-size:cover на iOS в портретном режиме

Ok. Вот как это работает (благодаря @iMeMyself):

поэтому сначала установите его, чтобы 100% , потом cover . Таким образом, весь браузер, который не может cover получить 100% стоимости, в то время как те, которые могут получить 100% заменяется крышка.

здесь код

он фиксирует фоновые изображения для ipad

просто введите размеры в соответствии с вашими размерами изображения

насколько мне известно, этот метод работает на всех устройствах IOS. В зависимости от других элементов страницы (заголовка и т. д.) Вам может потребоваться настроить Z-индекс для &:Перед элементом psuedo.

по данным проектирование веб-сайтов для iPhone X iOS 11 вводит новое расширение для существующего viewport мета-тег называется viewport-fit , который обеспечивает контроль над поведением вставки. Значение по умолчанию — auto , который не будет охватывать весь экран.

чтобы отключить поведение вставки по умолчанию и заставить страницу выложить в полный размер экрана, вы можете установить viewport-fit to cover как показано здесь:

без этой настройки существующие методы, используемые для заставок и полноразмерных изображений героев, могут отображаться не так, как ожидалось на iPhone X или других соответствующих устройствах iOS.

Источник