2013-08-08 2 views
-1

У меня есть некоторые трудности с отображением масштаба на разных браузерах. Я создал веб-сайт в браузере Chrome Chrome, но при загрузке сайта на iPhone или более раннюю версию IE фон не масштабируется или просто не отображается вообще.Размер фона в разных браузерах

я просто использовал код CSS:

фон-размер: 100% 150%;

Тогда я изменил его:

фона размер: авто;

Но это все еще вызывает некоторые проблемы. Любая идея, как я мог изменить размер/масштаб изображения в каждом браузере и IE с версии 6 до сих пор?

EDIT

С ниже кода, все работает на Chrome, FF и IE последнего, но на IE8 (и ниже я думаю) это показать нерастянутом картину. На iPhone он просто ничего не показывает. :/

#head-div 
{ 
    padding-bottom: 15%; 
    width: 100%; 
    background: url(../img/banner.gif) no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/banner.gif', sizingMethod='scale'); 
} 
+0

Возможный дубликат [Растянуть и масштабировать изображение CSS в фоновом режиме - только с CSS] (http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the- background-with-css-only) – cfs

+0

Он должен работать на iPhone. 'background-size' поддерживается в Safari. Однако не в IE8. ([Подробности] (http://caniuse.com/background-img-opts)) –

ответ

2
body { 
    background: url(image.jpg) no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',  sizingMethod='scale'); 
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale'); 
} 

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

+0

вы пропустили лидирующий штрих на префиксах. – Spudley

+0

мой ошибка. исправлено это – samrap

+1

нет забот :-) легкая ошибка. +1 за хороший ответ. Хотя я думаю, что CSS3Pie лучше, чем использование 'filter', из-за всех ошибок и ограничений стилей фильтра IE. – Spudley

1

Предлагаю использовать сценарий polyfill CSS3Pie.

Этот сценарий легко добавляет поддержку различных функций CSS к старым версиям IE, включая background-size.

Он работает в IE6 и выше и требует только небольшого количества дополнительного кода в вашем файле CSS для его активации, который другие браузеры полностью игнорируют.

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