dopasowanie do szerokości ekranu, wyśrodkowanie i tło do połowy, nie wiem jak to wytłumaczyć pisemnie, zajrzyj w temat Opcje

[misiek172]

Witam.

Jakoś pierwszy raz mi sie coś tkaiego trafiło:

Strona o załóżmy szerokości 1000px wyśrodkowana do środka ok, pod nią tło rozciągające się na całą szerokość ekranu ok, banał:

[XML] pobierz, plaintext 
#top{ width: 100%; float: left; background: url('cokolwiek.jpg') repeat-x left top transparent; }
 #top #top_in { margin: 0 auto; width: 1000px; } 
[XML] pobierz, plaintext 

ale, jak zrobić aby cały mechanizm działał tak jak ten powyższy ale tło #top szło do pewnego momentu, powiedzmy do środka strony i koniec...

mam nadzieje, że rozumiecie o co mi chodzi ;p

pozdrawiam

[piotrex41]

Krótka lekcja: (IMG:style_emoticons/default/tongue.gif)

1. Użycie takiego kodu:

Kod

background:url('images/bg1.png') 0px 200px repeat-x;

Powoduje, że tło wyświetla się całe na wysokość (800px) ale jest przesunięte o 200px w dół. Natomiast spokojnie się powiela na całą szerokość, mimo że samo ma 2px szerokości.

2. Użycie takiego kodu:

Kod

background:url('images/bg1.png') 0px -200px repeat-x;

Powoduje, że tło wyświetla się od wysokości 200px (a więc całe wyświetlenie ma wysokość 600px zamiast 800px) i nie jest przesunięte w dół. Natomiast spokojnie się powiela na całą szerokość.

3. Użycie obrazka który zaczyna się 200px niżej (pierwsze 200px jest przeźroczyste) wcale nie przeszkadza w użyciu repeat-x. Dobrze się powiela i wygląda tak samo jak we wniosku 1. (Tło miało 1000px wysokości, ale pierwsze 200px było przeźroczyste a poniżej było moje tło 800px).

Analogicznie sprawa ma się z tłem kolorowym (bez obrazka), lub z ustawieniem tła do 50% wysokości strony (pierwsze 50%, a później tła nie ma). Jeśli natomiast chcesz użyskać efekt tła stałego do połowy ekranu, to nie obejdzie się bez użycia position:fixed lub static.

Mam nadzieję że pomoże Ci to zrobić tło takie jak sobie życzysz.

Pozdrawiam,
~piotrex41

Ten post edytował piotrex41 9.07.2012, 11:59:39