Центрирование фиксированного div, div того же размера, что и изображение

Question

Так что я хочу разместить фиксированный div в центре экрана. Этот div также должен быть контейнером для дочерних div. Также я хочу, чтобы он отображал изображение (в качестве фона). Это код изображения:

.centerdiv > img{ 
height: 100%; 
width: auto; 
} 

Я хотел бы сохранить его таким образом, так что браузер будет всегда отображать полное изображение. В настоящее время Im пытается с этим HTML код:

<div class="centerdiv "><img src="bgstatic.png"> 
     </div> 

Я пытался сделать это с помощью CSS (добавление изображения в CSS коде). Я очень не против этой части. Основная идея состоит в том, чтобы иметь центрированное изображение и меню с фиксированным положением (чтобы они не прокручивались), а остальная часть страницы должна быть над ним и должна иметь возможность прокрутки.

Я пробовал с полями: авто, слева/справа 0/50% и т. Д. Я получил результат, которого я почти хочу. Но проблема заключалась в том, что мой контейнерный div был больше, чем фиксированный фоновый div, поэтому мне было очень сложно позиционировать остальную страницу страницы ...

Answer 1

<div style="text-align:center;"> 
    <div class="centerdiv "><img src="bgstatic.png"></div> 
</div> 

Css

.centerdiv{ 
       height: 100%; 
       width: auto; 
       display:inline-block; 
       position:fixed;} 

Answer 2

Просто, чтобы быть ясным.
Вы хотите создать статическое, центрированное фоновое изображение?

---

Если это так, это можно сделать только в CSS.

body { 
    background-image: url('bgstatic.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-attachment: fixed; 
} 

Это будет центр, статически, фоновое изображение.

Вот jsFiddle пример: http://jsfiddle.net/TGpWe/

Answer 3

Чтобы сохранить исходное соотношение сторон:

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

Пример: http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php