Forum PHP.pl > Dwa tła centrowane bez względu na rozdzielczość

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Dwa tła centrowane bez względu na rozdzielczość

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Sky_walker

17.02.2009, 21:03:35

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:

Cytat

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

17.02.2009, 21:35:10

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;

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;
}

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.