it-swarm.com.ru

Фоновое изображение не отображается на iPad и iPhone

Я хочу создать раздел с фоном, покрывающим его на мобильной веб-странице, поэтому я использовал следующий код CSS:

#section1{
    background: url("background1.png") auto 749px;
    height: 749px;
}

Фон отображается правильно на Android (Chrome, Firefox ...), но не отображается на iPhone или iPad (Safari, Chrome iOS ...). Я попытался установить эти свойства с помощью jQuery, когда DOM готов, но не повезло. Я читал, что размер может быть проблемой, но изображение составляет около 700 КБ (1124x749px), поэтому оно должно соответствовать правилам Safari Web Content Guide . В чем проблема?

9
Jorge Con Jota

Есть проблема с вашим правилом CSS:

Вы используете сокращенную запись, в которой свойство background-size- приходит после свойство background-position- и оно должно быть разделено /.

То, что вы пытаетесь сделать, это установить позицию, но она потерпит неудачу, так как auto не является допустимым значением для нее.

Чтобы заставить его работать в сокращенной записи, он должен выглядеть так:

background: url([URL]) 0 0 / auto 749px;

Также обратите внимание, что есть значение с именем cover, которое может быть здесь более подходящим и более гибким:

background: url([URL]) 0 0 / cover;

Support для background-size в сокращенной записи также не очень широк, поскольку поддерживается в Firefox 18+, Chrome 21+, IE9 + и Opera. Он вообще не поддерживается в Safari. В связи с этим я бы предложил всегда использовать:

background: url("background1.png");
background-size: auto 749px; /* or cover */

Вот несколько примеров и демонстрация, чтобы продемонстрировать это поведение. Вы увидите, что Firefox, например, показывает все изображения, кроме первого. Safari, с другой стороны, показывает только последнее.

CSS

section {
    width: 200px;
    height: 100px;
    border: 1px solid grey;
}

#section1 {
    background: url(http://placehold.it/350x150) auto 100px;
}

#section2 {
    background: url(http://placehold.it/350x150) 0 0 / auto 100px;
}

#section3 {
    background: url(http://placehold.it/350x150) 0 0 / cover;
}

#section4 {
    background: url(http://placehold.it/350x150) 0 0;
    background-size: cover;
}

Демо

Попробуйте, прежде чем купить

Дальнейшее чтение

MDN CSS ссылка "фон"
MDN CSS ссылка "background-size"

<'background-size'>
Смотрите background-size . Это свойство должно быть указано после background-position, разделенного символом '/'.

12
insertusernamehere

Моя проблема заключалась в том, что iOS не поддерживает background-attachment: fixed. Удаление этой строки заставило изображение появиться.

Похоже, что есть обходные пути для фиксированного фонового изображения: Как скопировать фоновое вложение, исправленное на iOS

11
yndolok

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

Уменьшение его размера и качества решило проблему с загрузкой.

7
Alexandre Bourlier

Проблема не была решена, когда я попытался правильно использовать фон в краткой записи. Это работает, когда я разделяю свойство background: 

#section1{
    background: url("background1.png");
    background-size: auto 749px;
    height: 749px;
}
6
Jorge Con Jota

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

Великие основы @insertusernamehere! Что бы я ни делал, я не мог показать свое изображение ... пока я не вернулся к основам. Размер изображения был слишком большим, и iPhone не нравилось загружать изображение такого размера, более 700 КБ. Итак, я уменьшил его до 32 КБ, и мы были в действии.

2
L X

Фоновое изображение исчезает в браузере IOS (iPhone/iPad) .... Это код, который я использовал:

/*CSS*/
.bg-image {
    background: url([URL]) center/cover no-repeat;
}
1
Rizwan Akram

Добавить цвет фона решил мою проблему

background-color: #F4F4F2;
0
dam1

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

Как только я это сделал, фон отрисовался, как и ожидалось.

@media only screen and (max-width:599px) {
  [id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; }
}

@media only screen and (max-width:479px) {
  [id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; }
}

Примечание: фоновый URL должен быть определен для обеих точек останова, чтобы он работал на iPhone 5 (iOS7).

0
josh1978

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

0
Carol McKay