Tworzenie tapety pod stronę Opcje

[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 (IMG:style_emoticons/default/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.

Ten post edytował Orzeszekk 3.11.2011, 21:09:47

[by_ikar]

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]

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 (IMG:style_emoticons/default/smile.gif)