Лучшая практика для фонового изображения

Question

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

Мне было интересно, была ли лучшая практика, о которой я не знал.

Заранее благодарим за любую помощь.

Изображение 2500px X 1500px

body 
{ 
margin:0px; 
background-image: url(../img/main_bg_2.jpg); 
background-repeat:no-repeat; 
background-position:center; 
} 

Я попробовал этот подход, который тоже работает, но изображение заполняет около 700px вниз, чем остальное белое на всех браузерах.

body 
{ 
margin:0px; 
background-image: url(../img/main_bg_2.jpg); 
background-size:100%,100%; 
background-repeat:no-repeat; 
} 

Answer 1

Вы пробовали

html {height:100%} 

Я думаю, что это проблема с IE ... что тело может быть 100%, но высота не 100% по умолчанию ... так что вы может переопределить его.

Попробуйте.

Answer 2

Вот общий сброс, который многие используют разработчики.

* { 
    margin: 0; 
    } 

Если это конкретная версия IE, вы можете использовать это.

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

Answer 3

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

а) Если вам нужно, чтобы показать только цвет или ухудшать изображение, лучшая практика, чтобы создать небольшое изображение и повторите изображение на странице.

b) Если вам нужно показать большое изображение, вам нужно будет снизить качество изображения. (Формат JPEG меньше PNG)

c) Иногда вы можете использовать фиксированное изображение. например:

http://www.w3schools.com/cssref/pr_background-position.asp

С уважением.

Answer 4

Если ваш приоритет для изображения, чтобы поразить каждый угол (и вы не возражаете, кадрирования изображения), попробуйте следующее, взятое из Chris Coyier's CSS Tricks site:

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

}