Обложка фонового изображения не совместима с IE, пытаясь найти альтернативу, которая работает

Question

Итак, у меня есть фоновое изображение с использованием фона: обложка. Теперь я знаю, что IE не нравится. Поэтому я пытаюсь реализовать некоторые из методов, обсуждаемых на этой странице: http://css-tricks.com/perfect-full-page-background-image/ с использованием файла CSS для IE. Я хочу, чтобы мой фоновый размер: обложка оставалась неизменной для всех браузеров, но IE, а затем IE CSS для загрузки в IE-браузерах, чтобы она выглядела одинаково. Решения, которые я пробовал, не работают. Пожалуйста помоги. Мой портфолио страницы url is: http://spenry.mydevryportfolio.com/portfolio/

Заголовок/фоновое изображение HTML (я добавил Div и IMG здесь для моего IE IE, но в других браузерах у меня есть в моей обычной таблице стилей, чтобы скрыть содержимое этого div потому что в других браузерах мое изображение отображается в моем CSS ниже как покрытие фона размера)

<article class="fullheight"> 
<div id="bg"> 
<img src="builds/images/gallery/web_photo.jpg" alt="Girl shooting an arrow with her bow"> 
</div> 
<div class="hgroup"> 
<h1>Bowpen Designs</h1> 
<h2>Aim Your Sites</h2> 
<p><a href="#about"><img src="builds/images/misc/arrow.png" alt="down arrow"></a></p> 
</div> <!-- hgroup div --> 
</article> <!-- fullheight --> 

CSS:

header .fullheight { 
background:url(../images/gallery/web_photo.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
display: -webkit-flex; 
display: flex; 
-webkit-align-items: center; 
align-items: center; 
-webkit-justify-content: center; 
justify-content: center; 
} 

#bg { 
display: none; 
} 

header .fullheight .hgroup { 
padding: 100px 0; 
} 

header .fullheight .hgroup h1 { 
color: #FFFFFF; 
font-size: 5em; 
font-weight: 900; 
line-height: 1.15em; 
text-shadow: #000000 0 0 20px; 
text-align: center; 
} 

@media (max-width: 650px) { 
header .fullheight .hgroup h1 { 
font-size: 2.5em; 
} 
} 

header .fullheight .hgroup h2 { 
display: block; 
color: #FFFFFF; 
width: 60%; 
max-width: 300px; 
margin: 0 auto; 
text-align: center; 
border: 1px solid #FFFFFF; 
margin-top: 15px; 
padding: 10px; 
font-size: 1.3em; 
background: rgba(18, 64, 133, 0.5); 
} 

header .fullheight .hgroup p { 
text-align: center; 
} 

header .fullheight .hgroup p img { 
padding-top: 50px; 
max-width: 50px; 
} 

Вот CSS для моего IE CSS - я попытался два различные методы здесь с этого сайта, но я должен пробовать bly удалить один. Но ни один из них не работал в IE, поскольку я пробовал оба. Я должен делать что-то неправильно.

#bg { 
position: fixed; 
top: -50%; 
left: -50%; 
width: 200%; 
height: 200%; 
} 

#bg img { 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
margin: auto; 
min-width: 50%; 
min-height: 50%; 
} 

.fullheight { 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/gallery/web_photo.jpg', 
sizingMethod='scale'); 
-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/gallery/web_photo.jpg', sizingMethod='scale'); 
} 

Answer 1

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

CSS:

body { 
background: url(../img/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

}