bei Bild auf Hintergrundbild legen tritt fehler auf

[Toledov5]

Hallo;

ich habe im Header ein Hintergrundbild. Auf diesem möchte ich ein Foto mit Border legen . Da soll mal ein Fotoslider hin. Auf jedenfall klappt alles auch die Ausrichtung im x .
Sobald ich aber mit Margin-top: **px ; arbeite verrutscht die mein gesammtes Hintergrundbild im y mit.

Wie kann ich mein Foto innerhalb meines Hintergrundbildes im y bewegen ohne das das HGB mit rutscht?

  
<div id="wrapper"><!-- wrapper open-->  
  
  
       <header id="main-header">  
  
               <div id="headerbild">  
  
               </div>  
  
       </header>  
  
  
</div><!-- wrapper closed-->

#wrapper{  
         width:100%;  
         height:300px;  
         margin: 0 auto;  
         background: none;  
  
}  
  
#main-header{  
         width: 1050px;  
         height: 300px;  
         margin: 0 auto;  
         background: url(../images/headerbild.png)  
  
}  
  
#headerbild{  
  
         width:350px;  
         height:200px;  
         margin-left: 520px;  
         margin-top: 0px;  
         background-image: url(../images/Chefs.png);  
         background-repeat: no-repeat;  
         border: 1px solid #00FD0C;  
}  

[Matthias Apsel]

Om nah hoo pez nyeetz, Toledov5!

Als erstes würde ich das HTML aufräumen. Ein Wrapper ist dort nicht notwendig, die Angabe von 100% Breite für ein Blockelement ebensowenig (weil es von Haus aus schon 100% breit ist).

<header>  
  <img>  
</header>

reicht als Struktur. Das Hintergrundbild wird per background-position: center; zentriert und das Bild kommt per display: block; margin: 49px auto 0; an die entsprechende Stelle.

Matthias