Я согласен с изображением в абсолютном div с 100% шириной и высотой. Убедитесь, что вы установили 100% ширину и высоту для тела в CSS и установите поля и отступы на ноль. Другая проблема, с которой вы столкнетесь при использовании этого метода, заключается в том, что при выделении текста область выделения может иногда охватывать фоновое изображение, что, к сожалению, приводит к тому, что полная страница имеет выбранное состояние. Вы можете обойти это, используя правило CSS user-select:none, например:
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
width: 100%
margin: none;
padding: none;
}
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -99999;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#background img {
width: 100%;
height: 100%;
}
#main{ z-index:10;}
</style>
</head>
<body>
<div id="main">
content here
</div>
<div id="background"><img src="bg.jpg"></div>
</body>
</html>
Опять же, Internet Explorer - плохой парень, потому что он не распознает опцию выбора пользователя - даже Internet Explorer 10 Preview не поддерживает ее, поэтому у вас есть возможность использовать JavaScript для запретить выбор фонового изображения (например, http://www.felgall.com/jstip35.htm) или использовать CSS 3 метод растягивания фона.
Кроме того, для SEO я бы поместил фоновое изображение внизу страницы, но если фоновое изображение загружается слишком долго (то есть изначально имеет белый фон), вы можете переместить в начало страницы.