Dwa tła centrowane bez względu na rozdzielczość, czyli udręki z dużymi rozdzielczościami Opcje

[Sky_walker]

Mam następujący problem:
Na stronie chciałbym mieć dwa tła - jako jedno samopowtażającą się grafikę w osi x, a jako drugie - dużą grafikę (szerokość 1150px) która powinna być zawsze wycentrowana.

CSS wygląda tak:

body {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
background: #070602 url('img/bg.jpg') repeat-x top;
margin: 0px;
}
#tlo2 {
margin: auto 0;
background: url('img/layout_top.jpg') no-repeat top;
width: 1150px;
height: 177px;
text-align: left;
}

Jak się nie trudno domyślić - efektem tego mamy #tlo2 w rozdzielczości 1024x768 wyrównane do lewej. Kiedy mamy rozdzielczość 1200 albo większą - jest ok.

Jak centrować div'a #tlo2 bez względu na rozdzielczość?

[likemandrake]

Czy aby napewno masz to tło na środku przy dużych roździelczościach?

Dla #tlo2 margin: auto 0; nie da Ci tego efektu, tylko margin: 0 auto; (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Uznam to za błąd podczas przepisywania.

Dodaj nowy div, dla potrzeb artykułu nadamy mu id="content".

A o to reguły:

Kod

#tlo {
    position: absolute;
    background: url('img/layout_top.jpg') no-repeat top;
    width: 1150px;
    height: 177px;
    margin: -88px 0 0 -575px;
    top: 50%;
    left: 50%;
    z-index: 1;
}

#content {
   position: relative;
   z-index: 2;
}