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

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

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

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

источник

2013-09-25 Jorge Con Jota

Там проблема с правилом CSS:

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

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

Чтобы заставить его работать в сокращенной форме он должен выглядеть следующим образом:

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

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

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

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

Demo

Try before buy

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

MDN CSS reference "background"
MDN CSS reference "background-size"

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

источник

2013-09-25 09:08:04 insertusernamehere

Спасибо большое! Идеальное и ясное объяснение! –

На самом деле это не исправление для iPad или iPhone, его ограничение –

@TejasTank Можете ли вы объяснить, что вы имеете в виду? – insertusernamehere

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

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

источник

2013-09-25 08:16:31

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

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

источник

2014-07-15 19:27:13

спасибо! решил проблему после большого разочарования. – user2755541

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

источник

2014-12-11 07:20:15

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

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

@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).

источник

2015-03-24 20:53:21 josh1978

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

Похоже, есть обходные пути для фиксированного фонового изображения, хотя: How to replicate background-attachment fixed on iOS

источник

2015-07-01 20:48:25 yndolok

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

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

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

источник

2016-01-04 20:29:02

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

background-color: #F4F4F2;

источник

2016-04-05 15:44:57 dam1

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

ответ

Смежные вопросы