Почему не работает cover css

Не работает 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 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.

Источник

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.

Источник

Как сделать background-image на весь экран, при условии того, что будет видна вся картинка?

Этот код не мой и старый я иногда юзаю этот метод

ну зачем бездумно копировать-то?
посмотрели бы актуальную поддержку браузерами caniuse.com/#search=background-size
Как видим префиксы уже пару лет неактуальны.

Вы скажите точнее, как нужно. У меня 3 варианта:

1. background-size: contain
Картинка показывается целиком, не искажаясь.
Пример

2. background-size: cover
Картинка заполняет все пространство, не искажаясь, но часть обрезается.
Пример

3. background-size: 100% 100%
Картинка заполняет все пространство, но искажается.
Пример

Источник

Background-image не работает

Здравствуйте! Свойство background-image не работает в файле css. Файл находится в папке css. css/style.css

index.html

Но в самом файле html свойство background-image работает.

Подскажите, почему не работает, если я размещаю в в файле css?

8 ответов 8

в css файле пропишите

Между тегами у вас некорректно написана ссылка на файл CSS. Ваш код должен выглядеть так:

Как видите вы не дописали type=»text/css» в теге link .

пол суток пробовал

,а оказывается надо вот так

Всем привет. Была такая же проблема: не работал backgrounf-image: url(link). Мучался часа 2, перепробовал всё, любые модификации но проблема оставалась. Ошибка заключалась в том, что не правильно был указан путь к картинке (файлу), и как не старался — ничего не помогало. Потом, когда я начал думать что html и css — не моё, мне вдруг пришла в голову мысль залезть в настройки. Я пользуюсь Notepad++ и обнаружил вот что: в пункте «Путь по умолчанию» было отмечено «запомнить последнюю директорию», я переставил отметку на «пройти за текущим документом», а в значении селектора background-image указал папку и файл: background-image: url(images/1.jpg) И все заработало. Надеюсь, кому да поможет инфа.

Столкнулся с аналогичной проблемой. Решил! Изображения формата .png почему-то не отображаются этим свойством, а вот .jpg и .webp отображаются

Судя по имени стиля вам нужен фон страницы. Если не работает, то проверьте правильный ли путь к картинке. то есть ../img/a.png или /img/a.png

Может помочь указания размеров картинки фона.

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

Связанные

Похожие

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

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

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

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

Источник