Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Tworzenie tapety pod stronę
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Orzeszekk
Witam. Wyglad mojej strony zaplanowalem sobie tak, ze w tle jest tapeta 1920x1080 i ona stoi nieruchomo w oknie przegladarki, natomiast przewija się górą dół główny div który trzyma treść w bloku szerokosci 1130px.

Problem jest w tym ze gdy ustawie tapetę jako background-image elementu body, to strona zaczyna sie zacinać przy przewijaniu. Fakt ze mam slabego kompa (lapek 2,3ghz 1 rdzen) ale mimo wszystko strona powinna chodzic plynnie i na starszych.

tapeta wyglada tak ze po prawej jest obrazek, na srodku jest czarne miejsce o szerokosci 1130 (zakrywa je glowny div), i po lewej tez jest obrazek.

mysle sobie moze by rozbic ten obrazek tapety na 2 obrazki zwykłe? ale wtedy jest problem z tym żeby one zachowywały się one tak jak tło elementu body. Nie chce aby pojawił mi się poziomy pasek przewijania. Teraz z elementem body dziala to tak ze im ktos ma wiekszy monitor tym więcej widzi tej tapety i chcialbym żeby na divach to tez tak działalo.

ma ktos pomysl jak to zrobic za pomoca CSS?
Sephirus
To jest dość ciekawy problem - też się z nim spotkałem - ustawianie tła z FIXED może okazać nie najlepszym pomysłem jak widać :/ Miałem podobny problem i wszędzie się to cięło :/ Możesz spróbować oszukać oko i zamiast background dla BODY dać DIV'a z position:fixed o rozmiarach 100% na 100% i tłem (zwykłym bez fixed) tym co miałeś - dać mu jakiś z-index mały reszcie dać większy i nie wykluczone że będzie lepiej chodzilo wink.gif
Orzeszekk
dac diva 100 na 100 fixed, w srodek diva o szerokosci layoutu, z-index niski, i float right dla lewego obrazka oraz float left dla prawego obrazka to nie jest glupi pomysl:) to moze zadzialac;d dziękówa;d
by_ikar
IMO tak wielkie tło dla strony to niestety jest masakra jeżeli chodzi o słabszy sprzęt i poprawną akcelerację. Pokaż mniej więcej jak ta tapeta wygląda, bo może można to rozwiązać łatwiej, z mniejszym obrazem. I wcale nie myślę tutaj o position: fixed, bo tego póki co nigdzie jeszcze nie używałem.
Orzeszekk
http://www.mobafire.com/http://www.mobafire.com/[/url]

o tak ma byc jak tutaj.

Sephirus
No tutaj to ładnie chodzi nawet... hmmm... Oni używają dość dużej rozdzielczości JPEG'a - zajmuje 180kb - a jaki Ty masz format tego tła?
Orzeszekk
Mobafire chodzi troche plynniej niz moja. Ja uzywam jpeg 320 kb, lub png 1,1 MB, lecz o dziwo PNG mniej zacina.

Moze jak pozbede sie srodka to problem troche minie, bo bądz co bądz wykroje 60% obrazka. Na mobafire na pewno nie jest nic wycięte ani kombinowane, mają normalnie walniętą tapetę, ale u nich o dziwo chodzi płynnie.

To znaczy u nich moze i chodzi plynniej bo ich jest mniejsze, jednak ta strona na monitorze 19stce brzydko wyglada gdyz juz nie starczy tego obrazka na dół. i zostaje czarny pasek pod spodem.
by_ikar
Cytat
To znaczy u nich moze i chodzi plynniej bo ich jest mniejsze, jednak ta strona na monitorze 19stce brzydko wyglada gdyz juz nie starczy tego obrazka na dół. i zostaje czarny pasek pod spodem.


No właśnie taki był zamiar, zobacz na obrazek że on nie jest równo ścięty, tylko dolny brzeg ma lekko ściemniony, co daje w sumie fajny efekt przenikania. Nie mniej, PNG IMO jest lepszym formatem od jpg a jak się go zapisze odpowiednio, to jakościowo, jak i wagowo jest znacznie lepszy od jpg. tyle że musisz odpowiednie śmieci z takiego png wywalić, bo tam się kupa śmieci chociażby w takim photoshopie zapisuje, która jest zbędna. Poczytaj: http://pornel.net/png dość dobrze wyjaśnione, podane progsy do optymalizacji takich png i serio, jakościowo i wagowo niekiedy wypada to zdecydowanie lepiej od jpg.
Orzeszekk
Cytat(by_ikar @ 3.11.2011, 22:31:50 ) *
No właśnie taki był zamiar, zobacz na obrazek że on nie jest równo ścięty, tylko dolny brzeg ma lekko ściemniony, co daje w sumie fajny efekt przenikania. Nie mniej, PNG IMO jest lepszym formatem od jpg a jak się go zapisze odpowiednio, to jakościowo, jak i wagowo jest znacznie lepszy od jpg. tyle że musisz odpowiednie śmieci z takiego png wywalić, bo tam się kupa śmieci chociażby w takim photoshopie zapisuje, która jest zbędna. Poczytaj: http://pornel.net/png dość dobrze wyjaśnione, podane progsy do optymalizacji takich png i serio, jakościowo i wagowo niekiedy wypada to zdecydowanie lepiej od jpg.


Nie uwazam ze to sciemnienie z dołu ładnie wygląda, mogliby się postarać jeszcze pare kilobajtow i miec calosc.
Niemniej dzieki za link na pewno sie przyda smile.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.