2013-02-14 8 views
44

Я использую свойство background-size для получения полного изображения по ширине и высоте, но у него проблемы с его полным покрытием в Chrome на планшете Nexus7 в портретном режиме. Он охватывает только ширину, а не высоту, то есть ниже 200px. Однако, когда я просматриваю сайт на рабочем столе Chrome (или что-то еще) и на вертикальном мониторе, чтобы имитировать портретные размеры, он не вызывает проблем.background-size: обложка не работает в портрете на Android-планшете

Кто-нибудь есть решение?

CSS:

html { 
    background: url(/images/post_bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/post_bg.jpg', sizingMethod='scale')"; 
} 

Портрет Снимок экрана:

ответ

6

я предоставлю решение, которое я нашел в случае, если кто работает в этом в будущем. Вместо того чтобы использовать фоновое изображение, я использовал <img>:

HTML:

<img id="full_bg" src="/images/post_bg.jpg" alt="Post your project on CustomMade"> 

CSS:

#full_bg { 
    height: auto; 
    left: 0; 
    min-height: 100%; 
    min-width: 1024px; 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

@media screen and (max-width: 1024px) { 
    #full_bg { 
     left: 50%; 
     margin-left: -512px; 
    } 
} 

Это работает кросс-браузер и на мобильных устройствах. Я нашел решение here.

81

Я считаю, что вы можете это исправить, определив высоту HTML и тела тегов в CSS, например, так:

html{ 
height:100%; 
min-height:100%; 
} 
body{ 
min-height:100%; 
} 

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

+4

Обратите внимание, что в моем случае мне нужно было либо 'height', либо' min-height' 'html' и ничего больше. – Rufflewind

+0

То же самое здесь. Только для элемента html только .... – MarcoZen

27

Я знаю, что это было долгое время, так как вопрос был задан, но я только что нашел ответ, который я думаю. Для меня размер фона: обложка работает в Android Browser и Android Chrome, если вы опускаете «фиксированный» в инструкции CSS для фона. После некоторых тестов, это работает для меня делает изображение фона в DIV:

#yourDivSelectorHere { 
width: 100%; 
height: 100%; 
position: fixed; 
top: 0; 
left: 0; 
z-index: 0; 
background-image: url(/img/backgrounds/1.jpg) ; 
background-repeat:no-repeat; 
background-position: center center; 
/* background-attachment: fixed; removed for Android */ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

}

ДИВ сама фиксируется в положении (в отличие от фонового изображения), это ширина 100% и высота, и помещается в конце всего. Это небольшое дополнительное усилие, а не просто добавление фонового изображения в HTML или BODY, но для меня это работает во всех браузерах, которые я тестировал до сих пор (FF, Chrome, IE8, IE9, Safari), на iPad2 и Android Chrome и Android-браузер.

+3

Отличный выбор времени! Это сработало для меня и должно быть принятым ответом ИМО! – Raj

+1

Дело в том, что размер фона может сделать гораздо больше, чем прикрытие, и вот где он не работает. –

0

Я нашел еще одно решение, использующее бит jquery stuff. Исправление основано на предположении, что мы используем изображение в ландшафтном измерении/пропорции для фона.

step1: сравнить «высота окна» и «страницы высоту содержимого»

step2: если «высота окна» меньше «страницы высоты содержимого»

step3: Применить это тело тега

HTML {

<body style="background-size: auto 'page content height'; background-attachment: scroll;"> 

}

сценарий

var wHeight = $(window).height(); 
    var bodyHeight = $('page-content-element').height(); 
    if(wHeight < bodyHeight){ 
     $('body').attr('style', 'background-size: auto '+ (bodyHeight*1.1) +'px;background-attachment: scroll;'); 
    } 
    else{ 
     $('body').removeAttr('style'); 
    } 

называют это на странице загрузки и изменения размеров окна

+0

Можете ли вы объяснить, что такое уровень содержимого страницы и содержимого страницы? То есть вы можете показать более полный пример? –

-3

Это решение работает для меня, а для Android

html{ 
height:100%; 
min-height:100%; 
} 
body{ 
min-height:100%; 
} 
+2

этот ответ является точной копией уже существующего. – luschn

2

Ну, я могу придумать другое решение: Я добавил его к телу, и все, что вам нужно позаботиться, это то, что привязка к фону: исправлено последнее правило:

работы:

body { 
     height:100%; 
     width:100%; 
     background-size:cover; 
     background-repeat:no-repeat; 
     background-position: center center; 
     background-attachment:fixed; 
} 

работы: не

body { 
      height:100%; 
      width:100%; 
      background-size:cover; 
      background-attachment:fixed; 
      background-repeat:no-repeat; 
      background-position: center center; 
} 

Это действительно Питти, что phonebrowsers, вообще говоря, немного глючит ...

+0

Черт! Я искал навсегда для этого. Знаете ли вы, почему требуется исправление? Я проверил это навсегда. – Tallboy

+0

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

1

Использование HTML фона вместо и дать «высоту: 100%»

html { 
 
    height:100%; 
 
    background: url(bg.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

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

  • Нет связанных вопросов^_^