Фоновое изображение, не отображаемое в Safari

Я работаю над отзывчивым дизайном, а класс "bgMainpage" имеет фоновое изображение, но он не отображается в Safari на всех устройствах. Я применил обложку фона, так как это то, чего хочет клиент. Я также добавил CSS для браузера, и я не уверен, что еще нужно сделать, чтобы он появился и в Safari. Chrome, FF, IE показывают изображение просто отлично. Любые идеи?

Ссылка на проект

CSS:

.bgMainpage{
    background:url("../images/bg.jpg") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

Ответ 1

Я преобразовал формат изображения из jpeg в gif, и он сработал. Итак, окончательный CSS:

.bgMainpage{
    background:url("../images/bg.gif") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

Ответ 2

У Safari есть явная ошибка, в которой не будут отображаться изображения jpg/JPEG определенного типа в фоновых условиях, если будут выполнены некоторые критерии. Для онлайн-использования существует тип jpg-изображения, называемого Progressive JPEG. Обычные jpg-изображения кодируют данные изображения сверху вниз, и вы можете видеть, как они загружаются таким образом в Интернете. Прогрессивный JPEG, с другой стороны, кодирует изображение постепенно более подробно. Это означает, что сначала он загружается нечетким, а затем становится яснее. Некоторые люди считают, что это выглядит лучше онлайн, поэтому он и используется. Некоторые оптимизаторы изображений автоматически превратят jpgs в прогрессивное для использования в Интернете.

По моему опыту, Safari не отображает jpg, когда выполняются некоторые из следующих критериев:

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

Я не смог воссоздать это в любом браузере, кроме Safari.

Чтобы исправить это, вы можете либо повторно сохранить изображение, убедившись, что оно не находится в прогрессивном формате (для фотошопа и т.д. для этого есть селектор), либо используйте другой формат (gif, png и т.д.)

Ответ 3

У меня такая же проблема, и я решил эту проблему, изменив:

background: url("images/backgroundimage.jpg") no-repeat fixed 0 0 / cover rgba(0, 0, 0, 0);

    background: url("images/backgroundimage.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;

и теперь это хорошо работает в сафари:)

Ответ 4

Я попал сюда с поисковой страницы google, поэтому, если эта проблема возникает для кого-то другого, просто убедитесь, что вы дважды проверяете свой код. Safari может быть очень разборчивым относительно правильного кода, поэтому, даже если он правильно напечатал здесь в вопросе, просто выполните двойную проверку. Если вы забудете конечную скобку, она не будет отображаться, если другие браузеры, такие как Chrome, предполагают, что вы хотели бы разместить ее и правильно отобразить страницу. Убедитесь, что весь ваш код правильно открыт/закрыт:

<div style="background-image:url('../images/bg.jpg');">HEY</div>

Ответ 5

Была проблема и нашла это, но ничего не получилось. В конце концов выяснилось, что URL() не имеет своих закрывающих круглых скобок. Даже без него фоновые изображения работали на IE 9+, Edge, Chrome и Firefox. Только Safari из проверенных браузеров не отображал фоновые изображения.

Добавлено), и все сработало.

Ответ 6

У меня была такая же проблема с Safari. Я пробовал другие решения, единственное, что сработало для меня, - это удалить отрицательный z-index.

Ответ 7

Попробуйте изменить или удалить:

background-attachment:fixed;

его работы для меня в сафари.....

Ответ 8

возможно, потому что изображение сохранено неправильно. У меня была эта проблема, и мне пришлось изменить следующее:

откройте свою фотографию в фотошопе и сохраните ее "cmyk", эта опция должна быть изменчивой в представлении, configure-proof, cmyk-colors (извините, мой фотошоп все на немецком языке)

надеюсь, что это поможет

Ответ 9

У меня была та же проблема. мое изображение было прогрессивным, и, как ответил JC Hulce, у сафари есть ошибка.
Чтобы проверить, является ли ваше изображение прогрессивным, перейдите по ссылке: techslides.com/demos/progressive-test.html.
Чтобы исправить открытие в фотошопе и перейти в файл меню- > сохранить для веб-страниц

Ответ 10

Попробуйте со следующим кодом, вам может потребоваться изменить ширину, высоту и URL.

.gallery {
   height: 190px;
   width: 940px;
   margin-bottom: 13px;
   background-color: transparent;
   background-image: url("/img/user/admin/photo.jpg");
   background-repeat:no-repeat;
   background-position: center bottom;
   background-attachment: scroll;
   background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

Ответ 11

Я просто столкнулся с этой проблемой, и ни одно из предлагаемых решений не зафиксировало это. Я решил мой экземпляр этого, и это произошло из-за смешанных протоколов: на сайте был https, а bg-изображения были http. Это привело к тому, что загрузка изображений отключилась и не отображалась только в Safari, на MacOS и только для некоторых пользователей.

Ответ 12

Попробуйте этот код.

.bgMainpage{
    background:url(../images/bg.jpg) no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;

Ответ 13

У меня была такая же проблема, и ни одно из других решений здесь не устранило проблему. Для меня у меня было фоновое изображение на якоре, завернутом в div. Все браузеры отлично обрабатывали фоновое изображение, кроме Safari 6. Исправление для меня состояло в том, чтобы установить положение: относительное по div и позиции: абсолютное по привязке.

Ответ 14

Кажется, сафари не нравится:

background-attachment: fixed;

Но я все еще хочу иметь некоторый параллакс, особенно на настольных компьютерах. Итак, мое решение состояло в том, чтобы удалить вышеуказанное из простого класса .header и поместить его под:

@media(min-width: 1334px)

Это изображение отображается на большинстве iPhone через iPad. Он просто не распространяется на iPhone 6 Plus. Это разрешение телефона попадает на рабочий стол.

Ответ 15

У меня была аналогичная проблема, но у меня не было контроля над изображением, потому что она была порождена tumblr, поэтому прогрессивные предложения не работали. Я дважды проверил свой код и все остальное, что также было предложено, наконец, я попытался установить MIN-HEIGHT в div с фоновым изображением, и Safari, наконец, показала его, как и любой другой браузер. Надежда, которая помогает избавиться от нескольких головных болей.

Ответ 16

Измените свойство background на background-image и все победители.