Background size: CSS background-size property

Разное 

html — CSS background-size: замена обложки для Mobile Safari

спросил

Изменено 4 года, 11 месяцев назад

Просмотрено 172к раз

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

Очевидно, background-size: обложка ведет себя неожиданно на устройствах iOS. Я видел несколько примеров того, как это исправить, но я не могу заставить их работать в моей ситуации. В идеале я бы предпочел не добавлять дополнительные теги в HTML, но если это единственный способ, то я это сделаю.

Вот мой код:

 . section {
  поле: 0 авто;
  положение: родственник;
  отступ: 0 0 320px 0;
  ширина: 100%;
}

#секция 1 {
  background: url(...) 50% 0 - фиксированное неповторение;
  размер фона: обложка;
}

#раздел2 {
  background: url(...) 50% 0 - фиксированное неповторение;
  размер фона: обложка;
}

#раздел3 {
  background: url(...) 50% 0 - фиксированное неповторение;
  размер фона: обложка;
} 
 <тело>
  <дел>
    ...
<дел> ...
<дел> ...

Вопрос в том, как сделать так, чтобы фоновое изображение полностью закрывало раздел div, принимая во внимание переменную ширину браузера и переменную высоту содержимого в div?

  • html
  • css
  • mobile-safari

Недавно у меня была похожая проблема, и я понял, что это не из-за

background-size:cover , но background-attachment:fixed .

Я решил проблему, используя медиа-запрос для iPhone и установив для свойства background-attachment значение scroll .

Для моего случая:

 .cover {
    размер фона: обложка;
    background-attachment: исправлено;
    фоновая позиция: по центру по центру;
    @media (максимальная ширина: @iphone-экран) {
        background-attachment: прокрутка;
    }
}

Изменить: блок кода находится в МЕНЬШЕ и предполагает предопределенную переменную для

@iphone-экран . Спасибо за уведомление @stephband.

10

У меня была эта проблема во многих мобильных представлениях, которые я недавно создал.

Мое решение по-прежнему представляет собой чистый запасной вариант CSS. работа.

HTML

CSS 

 #bg {
  положение: фиксированное;
  сверху: 0;
  слева: 0;
  /* Сохранить соотношение сторон */
  минимальная ширина: 100%;
  минимальная высота: 100%;
}

4

Также размещено здесь: «размер фона: обложка» не закрывает экран мобильного телефона

Это работает на Android 4. 1.2 и iOS 6.1.3 (iPhone 4) и переключается на рабочий стол. Написано для адаптивных сайтов.

На всякий случай в HTML-голове что-то вроде этого:

HTML:

CSS:

 HTML {
    /* Что вы хотите */
}
.html-мобильный-фон {
    положение: фиксированное;
    z-индекс: -1;
    сверху: 0;
    слева: 0;
    ширина: 100%;
    высота: 125%; /* Чтобы компенсировать место в адресной строке мобильного браузера */
    фон: url(/images/bg.jpg) без повторов;
    размер фона: 100% 100%;
}
@media (минимальная ширина: 600 пикселей) {
    HTML {
        фон: url(/images/bg.jpg) фиксированный центр без повторов;
        размер фона: обложка;
    }
    .html-мобильный-фон {
        дисплей: нет;
    }
}

В сети есть ответы, которые пытаются решить эту проблему, однако ни один из них не работал у меня правильно. Цель: поставить фоновое изображение на тело и иметь background-size:cover; работа мобильная, без медиазапросов, переполнения или хаки z-index:-1; позиция: абсолютная;

накладок.

Вот что я сделал, чтобы решить эту проблему. Он работает в Chrome на Android, даже когда ящик клавиатуры активен. Если кто-то захочет протестировать iPhone, это будет круто:

 тело {
    background: #FFFFFF url('../image/something.jpg') фиксированный верхний центр без повторов;
    размер фона: обложка;
    -webkit-background-size: обложка; /* это может понадобиться сафари */
}

Вот оно волшебство. Относитесь к html как к обертке с принудительным соотношением высоты относительно фактического окна просмотра. Вы знаете классический адаптивный тег

? Вот почему используется vh . Кроме того, на первый взгляд кажется, что тело должно получить эти правила, и это может выглядеть нормально… до изменения высоты, например, когда открывается клавиатура.

 HTML {
    высота: 100вх; /* установить ограничение области просмотра */
    минимальная высота: 100%; /* установить высоту */
}

1

Это правильный код размера фона: