растягивая фоновое изображение в IE

У меня фоновое изображение. Я растягиваю его так, чтобы он соответствовал всей странице. Но он работает в браузерах, отличных от IE. Но если я использую фоновый размер, он работает в IE9. Но я хочу, чтобы он работал в IE8. Как это сделать? Заранее спасибо.растягивая фоновое изображение в IE

В других браузерах и в IE9: enter image description here

В IE8: enter image description here

Вы можете найти разницу в нижней части страницы. Вот мой код:

body, html{ 
    height:100%; 
    padding:0; 
    margin:0; 
} 

body.BodyBackground { 

    margin: 0px; 
    background: url(../images/common/header/Background_color.png); 
    background-repeat:repeat-x; 
    background-attachment:fixed; 
    background-position:top center; 
    height: 100%; 
    width: 100%; 
    border: 0; 
    background-size:contain; 
    display:inline-block; 
    background-color: transparent; 


} 

div.content{  
    height:100%; 
    width:97%; 
    background-color: rgb(255, 255, 255); 
    margin: 0px 25px 25px 25px; 
    height:470px; 
    background-position:center; 
    background-repeat:no-repeat; 
    background-attachment:fixed; 

}

источник

2013-05-10 mukund

'background: url (../ images/common/header/Background_color.png) #yourColorFromBottomOfImage;' – Morpheus

Я не получил вас. Не могли бы вы быть более ясными? – mukund

Просто откройте фоновое изображение в Photoshop (или любом другом программном обеспечении) и возьмите нижний цвет вашего изображения. Затем замените мой '# yourColorFromBottomOfImage' на цвет, который вы захватили. – Morpheus

IE8 не поддерживает background-size собственности.

У вас есть следующие варианты:

использовать фоновый рисунок, который не нуждается в растяжку.
Обеспечить IE8 с другим фоновым изображением (или без фонового изображения на всех)
[править] Смmy blog post on the subject для получения дополнительной информации о том, как добиться этого в чистом CSS, без браузера хаков.
Игнорируйте проблему и разрешите пользователям IE8 немного сломать сайт.
Используйте скрипт polyfill, такой как CSS3Pie, чтобы добавить функцию background-size в IE8.

Если вы действительно хотите использовать background-size, и вам действительно нужно поддерживать IE8, то последний из этих вариантов, вероятно, является лучшим выбором для вас.

источник

2013-05-10 09:57:01 Spudley

Как использовать css3pie – mukund

скачать с http://css3pie.com/ и следовать инструкциям на сайте. – Spudley

Примечание: вам понадобится css3pie v2 для функции фона. – Spudley

CSS3 собирается реализовать атрибут фона. Но он не поддерживается в IE < 9.

Если вы хотите масштабировать фоновый градиент, вы можете использовать элемент img, потому что он масштабируется. Вместо использования фона для отображения PNG теперь вы используете элемент img и устанавливаете ширину и высоту на 100%.

Я думаю, что это то, что вы хотите:

* { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    height: 100%; 
} 

#page { 
    position: relative; 
    min-height: 100%; 
} 

#page img { 
    background-color: transparent; 
    height: 100%; 
    left: 0px; 
    position: absolute; 
    top: 0px; 
    width: 100%; 
}

Разметка:

<body> 
    <div id="page"> 
     <img src="../images/common/header/Background_color.png" alt="" /> 
    </div> 
</body>

источник

2013-05-10 11:06:21 Salomonder

Если мне это нравится, я получаю две порции. Один показывает только фон, а другой просто показывает содержимое. – mukund

Хотя, как и другие ответы состояние background-size не поддерживается верно. Есть и другие способы, которыми это может быть достигнуто.

Для достижения растянутых фонов в старом IE можно использовать следующие элементы.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Другие варианты калибровки для sizingMethod:

культур клипы изображения в соответствии с размерами объекта.
image По умолчанию. Увеличивает или уменьшает границу объекта в соответствии с размерами изображения.
шкала Растягивает или сжимает изображение, чтобы заполнить границы объекта.

Важно не использовать это на html или body тега. Вместо этого создайте поле позиции fixed со 100% шириной и высотой.

источник

2013-06-03 09:55:50 Blowsie

растягивая фоновое изображение в IE

ответ

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