Pozycjoowanie elemntu

[daGGer]

Witam mam problem, otóż tworzę sobie stronę, jestem początkujący... Składnie języka znam, ale nadal nie iwem dokońca jak dobrze pozycjonować grafiki na stronie .
Więc tak mam 2 grafiki. Jedna to taki jakby niby background, ma on 700/700pikseli i się rozmazuje i wchodzi jakby w domyślny kolor strony. A drugi to logo i parę napisów. (Jest to narazie jakby przedstrona, informacje miejscu zamiszkania/telefonie i faxie no i 2 guziki do wejścia na stronę i oraz kontaktu. Ten drugi obrazek musze umieścić na tym backgroundzie. Backgroundowi wystarczy, że ustawię margin-left oraz right na auto i on będzie na środku. Jednak aby ten drugi obrazek wstawić NA background to muszę go wypozycjonować, gdy użyje position:relative to musze jakieś śmieszne -700px dać i do tego mimo, że nie ma na dole strony nic nie ma to i tak suwak zostaje potym jak dodaje mi na dole pod backgroundem ten obrazek, a gdy używam absoluta to jest okej, ale jak zwiększam rozdzielczość to wtedy BG ustawia się znów na środku, a drugi obrazek przesuwa się w lewo...
Kod html'a

Kod:

<div id="kontener">
<div id="header">
       <a id="mainBG"><img src="images/BG.png" alt="bg">
    <a id="mainLogo"><img src="images/logo.png" alt="logo">
</div>
</div>
</body>

Postanowiłem użyć <a id="~~~ ponieważ nie chciałem każdego obrazka brać w osobny div bo słyszałem, że jest to niesemantyczne.

Kod:

body {text-align: center;margin-left:auto;margin-right: auto;}

* {margin: 0px;padding: 0px;}

#kontener {margin-left: auto;margin-right: auto; width: 960px; height: 800px;position:absolute;}

#mainBG { margin-left:auto;margin-right:auto;}

#mainLogo {margin-left:auto;margin-right:auto; position: absolute; top:0px; left: 130px;}

Pozdrawiam