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

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

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

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

9
background css ios ipad iphone

8 ответов

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

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

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

чтобы заставить его работать в стенографии, он должен выглядеть так:

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

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

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

на поддержка for 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;
}

демо

попробовать прежде чем купить!--40-->

более дальнеишее чтение

MDN CSS ссылка "фон"
MDN CSS ссылка "фоновый размер"


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

11

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

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

10

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

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

7

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

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

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

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

2

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

0

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

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

@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

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

background-color: #F4F4F2;
0