Размер фона CSS: замена крышки для Mobile Safari

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

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

Вот мой HTML:

<body>
    <div id="section1" class="section">
        ...
    </div>
    <div id="section2" class="section">
        ...
    </div>
    <div id="section3" class="section">
        ...
    </div>
</body>

И CSS:

.section {
    margin: 0 auto;
    position: relative;
    padding: 0 0 320px 0;
    width: 100%;
}

#section1 { 
    background: url(...) 50% 0 no-repeat fixed;
    background-size: cover; 
}

#section2 { 
    background: url(...) 50% 0 no-repeat fixed;
    background-size: cover; 
}

#section3 { 
    background: url(...) 50% 0 no-repeat fixed;
    background-size: cover; 
}

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

Ответы

Ответ 1

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

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

http://css-tricks.com/perfect-full-page-background-image/ как три отличных метода, последние два отступают, когда покрытие CSS3 не работает.

HTML

<img src="images/bg.jpg" id="bg" alt="">

CSS

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;
}

Ответ 2

Недавно у меня была аналогичная проблема, и я понял, что это не из-за background-size:cover, а background-attachment:fixed.

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

В моем случае:

.cover {
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;

    @media (max-width: @iphone-screen) {
        background-attachment: scroll;
    }
}

Изменить: блок кода находится в состоянии LESS и принимает заданную переменную для @iphone-screen. Спасибо за уведомление @stephband.

Ответ 3

Также опубликовано здесь: "background-size: cover" не распространяется на мобильный экран

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

HTML:

<div class="html-mobile-background"></div>

CSS

html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 125%; /* To compensate for mobile browser address bar space */
    background: url(/images/bg.jpg) no-repeat; 
    background-size: 100% 100%;
}

@media (min-width: 600px) {
    html {
        background: url(/images/bg.jpg) no-repeat center center fixed; 
        background-size: cover;
    }
    .html-mobile-background {
        display: none;
    }
}

Ответ 4

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

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

body {
    background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center;
    background-size: cover;
    -webkit-background-size: cover; /* safari may need this */
}

Вот волшебство. Относитесь к html как обертка с соотношением принудительной высоты относительно фактического видового экрана. Вы знаете классический отзывчивый тег <meta name="viewport" content="width=device-width, initial-scale=1">? Вот почему используется vh. Кроме того, на поверхности кажется, что body должен получить эти правила, и он может выглядеть нормально... до изменения высоты, как при открытии клавиатуры.

html {
    height: 100vh; /* set viewport constraint */
    min-height: 100%; /* enforce height */
}

Ответ 5

Для версий Safari 5.1 свойство css3 background-size не работает. В таких случаях вам нужно webkit.

Поэтому вам нужно использовать атрибут -webkit-background-size, чтобы указать фоновый размер.

Следовательно, используйте -webkit-background-size:cover.

Ссылка < версии Safari с использованием webkit

Ответ 6

Я нашел следующее на веб-сайте Стивена Гилберта - http://stephen.io/mediaqueries/. Он включает в себя дополнительные устройства и их ориентацию. Работает для меня!

Примечание. Если вы скопируете код со своего сайта, вы захотите его отредактировать для дополнительных пробелов, в зависимости от используемого редактора.

/*iPad in portrait & landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}

/*iPad in landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}

/*iPad in portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }

Ответ 7

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

<div class="html-mobile-background">
</div>

<style type="text/css">
html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* To compensate for mobile browser address bar space */
    background: url(YOUR BACKGROUND URL HERE) no-repeat; 
 center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 background-size: 100% 100%
}
</style>

Ответ 8

@media (max-width: @iphone-screen) {
  background-attachment:inherit;    
  background-size:cover;
  -webkit-background-size:cover;
}

Ответ 9

Я нашел рабочее решение, следующий пример кода CSS предназначен для iPad:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

    html {  
        height: 100%;
        overflow: hidden;
        background: url('http://url.com/image.jpg') no-repeat top center fixed;
        background-size: cover; 
    }

    body {  
        height:100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

}

Ссылка ссылки: https://www.jotform.com/answers/565598-Page-background-image-scales-massively-when-form-viewed-on-iPad

Ответ 10

html body {
  background: url(/assets/images/header-bg.jpg) no-repeat top center fixed;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;

  -webkit-background-size: auto auto;
  -moz-background-size: auto auto;
  -o-background-size: auto auto;
  background-size: auto auto;
}