16 Programowanie 4 minuty czytania

Podwójne tło na stronie

Niektóre projekty graficzne, potrafią przyprawić o gęsią skórkę nie jednego webdevelopera. Całkiem niedawno miałem kilka projektów, gdzie tło strony było dość problematyczne i osobę, która zaczyna zabawę z blokami zapewne by skutecznie zniechęciło – bo na tabelkach można dużo łatwiej.

Niektóre projekty graficzne, potrafią przyprawić o gęsią skórkę nie jednego webdevelopera. Całkiem niedawno miałem kilka projektów, gdzie tło strony było dość problematyczne i osobę, która zaczyna zabawę z blokami zapewne by skutecznie zniechęciło – bo na tabelkach można dużo łatwiej.

problematyczne projekt

Założenie jest takie: obrazek ten ma być stroną powitalną, znajdować się na środku strony oraz linkować do strony z zawartością. Dodatkowo po bokach mają się znajdować odpowiednie tła.
O ile z wyśrodkowaniem obrazka i wrzuceniem jednego z dwóch teł każdy sobie bez probemu poradzi, to z tym drugim tłem już niekoniecznie.
Po "tabelkowemu" sprawa wygląda prosto: tabelka, a w niej 3 kolumy (odpowiednio 25%, 50% i 25% szerokość), w pierwszej i ostatniej odpowiednia tła, w środkowej obrazek.

Do dzieła

Mamy poprawnie zbudowany dokument xHTML. Wstawiamy obrazek i tworzymy style.

Style wyglądają tak:

body,html {
background: url(pikselowe-tlo-lewe.jpg) repeat-x;
margin: 0;
text-align: center;
img { border: 0; } /* dla obrazków, gdy są one podlinkowane to pojawia się domyślny border */
}

Jako, że na stronie jest tylko obrazek, to od razu w body można wyśrodkować tekst.

Trik

Sztuczka polega na stworzeniu dodatkowego elementu z tłem, który będzie zajmował drugą połowę strony.
Dodajemy nowy element blokowy przed obrazkiem.

Teraz obrazkowi trzeba dodać artybut position: relative, aby mieć możliwość ustawienia kolejności wartsw. Atrybut z-index ustawiamy na 100.

img { position: relative; border: 0; z-index: 100; }

Teraz co pozostaje, to ostylować wspomniany wcześniej element blokowy.
Będzie miał takie właściwości: position:absolute, aby mieć możliwość umieszczenia go w dowolnym miejscu na stronie i ustawić mu kolejność wartsw, szerokość oraz wysokość.

#drugieTlo {
background: url(pikselowe-tlo-prawe.jpg) top repeat-x;
position: absolute;
z-index: 10; /* 10 jest mniejsze od 100, więc będzie pod obrazkiem */
width: 50%; /* połowa strony */
height: 300px; /* wysokość tła */
top: 0;
right: 0; /* dzięki tym dwom atrybutom, nasz div ląduje po prawej części strony */
}

Całość do zobaczenia pod adresem: http://blog.shpyo.net/sztuczki_css/podwojne_tlo/ - działa na Firefoxie, Internet Explorerze oraz Operze.




Akceptuję politykę prywatności

Raz w miesiącu e-mail z najlepszymi artykułami

Zdjęcie autora wpisu - Piotr Cichosz

Piotr Cichosz — autor wpisu

Frontend developer. Tworzę zaawansowane systemy webowe w JS. Swoją wiedzę nt. SEO wykorzystuję do rozwijania własnych projektów (z lepszym lub gorszym efektem). Dużo eksperymentuję i staram się określić jak bardzo można nagiąć cierpliwość algorytmów Google (:. Prowadzę teraz bloga technologicznego oraz bloga o Apple

Komentarze 16

author webworker www 16.03.2007 19:46:08

No dobre-tak własnie powinno się operować na stylach-ale ja raczej niebawie się w ustawianie warstw-zawsze można to jakoś pominąć...np stosując position i float...ale style to podstawa-tabele odpadają teraz całkowicie...

author Alexander www 26.01.2008 10:20:58

to mi się właśnie w divach nie podoba. Jak napisałeś, w tabelach nie ma kombinowania. Wstawiasz 3 kolumny i po robocie :D

Dlatego ja jak robię jakąś stronę, to często ją układam na jakiejś jednej, czy 2 tabelkach :)

author cezarc www 29.02.2008 15:20:32

A jak zrobić, żeby wysokość tła się skalowała do okna przeglądarki?? Próbuję się przestawić z tabelek na divy, ale to masakra jest.

author krm www 24.09.2008 22:25:54

a ja mam do wykonania stronę gdzie praktycznie są 4 tła, po lewe i po prawej po dwa, jedno powtarzające się w pionie, drugie w poziomie, i jak to rozgryźć :(

author adm www 14.12.2008 18:43:07

a to tło to nie jest takie samo?
po co 2 różne?

author adm www 14.12.2008 18:43:50

aaa, już wiem.
różne wysokości.
przepraszam za pośpiech, taki już jestem niecierpliwy;)

author sir radoslaw www 28.12.2008 15:01:41

@przejście z tabelek i tła
myślę że jak to przeczytasz i dodasz trochę wyobraźni to rozwiąże problem, bo inaczej jest to materiał na nowy tutorial: http://perfectionorvanity.com/kategoria/css/2 zresztą jak prawie wszystkie artykuły z tego bloga

author b4rt3k.net www 21.03.2010 11:24:10

Alexander Ty mózgu. Wiesz co to standardy w3c? TO gratuluję robienia tabelek.

author vajrus www 26.07.2010 10:09:18

hehe niektórzy piszą takie rzeczy jakby się zatrzymali przed 7 laty i dalej klepią tabelki - xhtml i css to zajebioza przeca jest

author derka www 01.09.2010 14:50:39

Co do standardów W3C - to tabelki również są w nim zawarte. Używa się ich do prezentowania danych tabelarycznych. Nie sądzisz chyba że wszystkiego typu listy będą na divach. Po prostu tworzenie szablonów w oparciu o tabele jest już przestarzale i mało eleganckie. Ale nie stosujmy na siłę div-ów tylko dlatego iż jest to modne ;]

author vajrus www 26.07.2010 10:09:18

hehe niektórzy piszą takie rzeczy jakby się zatrzymali przed 7 laty i dalej klepią tabelki - xhtml i css to zajebioza przeca jest

author derka www 01.09.2010 14:50:39

Co do standardów W3C - to tabelki również są w nim zawarte. Używa się ich do prezentowania danych tabelarycznych. Nie sądzisz chyba że wszystkiego typu listy będą na divach. Po prostu tworzenie szablonów w oparciu o tabele jest już przestarzale i mało eleganckie. Ale nie stosujmy na siłę div-ów tylko dlatego iż jest to modne ;]

author Akcesoria gsm 04.06.2011 19:25:43

W sumie ciekawa sprawa z tymi podwójnymi warstwami, próbowałem coś takiego zrobić ale niestety się nie udało.

author stefanex 22.07.2011 21:56:59

Link nie działa:( Można go wciskać w nieskończoność.

author PAweł 05.11.2011 20:55:50

Przydało się. Dziękuje!

author Allenoc www 03.12.2011 20:15:03

No i jest fajnie,dzięki wielkie.

Dodaj komentarz