Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML]Zdjecie jako tlo strony. Problem, Jak zrobic, zeby zdjecie (tlo) zawsze pokrywalo cala objetosc okna?
kapuch
post 8.05.2010, 17:03:49
Post #1





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

Ostrzeżenie: (0%)
-----

Jak zrobic tlo strony, ktore ma byc zdjeciem 800x600px (nie deseniem), ktore sie nie powtarza, a mimo tego pokrywa cale obszar okna przegladarki, bez wzgledu na rozdzielczosc.
Wydaje mi sie ze gdzies juz taka strone widzialem, niestety teraz trudno mi ja znalesc :/
Probowalem tak:
[HTML] pobierz, plaintext 
  1. body {
  2.  background: url(tlo800x600.jpg) no-repeat;
  3. }
[HTML] pobierz, plaintext

ale gdy okno przegladarki ma wiekszy rozmiar niz 800x600 to reszta okna pozostaje wypelniona zwyklym tlem (np. kolorem czarnym)

probowalem tez tak:
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. #tlo {
  3.  position: fixed;
  4.  top: 0px;
  5.  left: 0px;
  6.  width: 100%;
  7.  height: 100%;
  8.  background: url(tlo800x600.jpg) no-repeat;
  9. }
  10. </style>
  11. <div id="tlo"></div>
[HTML] pobierz, plaintext

To samo co z kodem wyzej sad.gif

Nastepnie zrobilem tak:
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. #tlo {
  3.  position: fixed;
  4.  top: 0px;
  5.  left: 0px;
  6.  width: 100%;
  7.  height: 100%;
  8. }
  9. </style>
  10. <div id="tlo">
  11.  <img src="tlo800x600.jpg" border="0" width="100%" height="100%" />
  12. </div>
[HTML] pobierz, plaintext

I tu juz efekt jest moim zdaniem najlepszy, poniewaz zdjecie samo dopasowuje sie do rozmiaru okna, ale przy rozdzielczosciach panoramicznych zdjecie jest nieproporcionalne i psuje caly efekt.
Dodatkowo ma to tez swoje inne wady i nie o to mi do konca chodzi.
Macie swoje sposoby, aby takie tlo zrobic i zeby nie bylo dennego powtarzania sie obrazka, lub dennego jednobarwnego tla, gdy obraz sie "skonczy"?

EDYTA:
Ok znalazlem strone, ktora ma takie tlo: http://co.91.com/index/
Nie jest to ta strona, ktora pamietam, ale moze takze posluzyc jako przyklad smile.gif

EDYTA DWA:
Sprawdzilem ta strone IeTesterem i to tlo pozostaje nieruchome w IE7 i IE8, a 5 i 6 przewija zawartosc strony razem z tlem, jak to jest rozwiazane?

Ten post edytował kapuch 8.05.2010, 17:17:55


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
Go to the top of the page
+Quote Post
tehaha
post 8.05.2010, 17:18:34
Post #2





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

Ostrzeżenie: (0%)
-----

na tej stronie co wskazałeś tło się nie powtarza ani nie dopasowuje do okna, jest tam po prostu duży obrazek
http://images.91.com/co/img/festival/allbg_100504.jpg
http://images.91.com/co/index/100108/top_100401_1.png
o szerokości 1680px, odradzam Ci próbowania sposobu w którym obrazek sam się rozciąga bo na jednej rozdzielczości będzie to dobrze wyglądać a na drugiej beznadziejnie

tu masz css do tego tła:

[HTML] pobierz, plaintext 
  1. .full_bg { width: 100%;background: url(http://images.91.com/co/index/100108/allbg.jpg) no-repeat center top fixed;}
[HTML] pobierz, plaintext

być może ten atrybut fixed nadaje taki efekt, ale nie wiem na pewno bo nie robiłem takiego ruchomego tła

Ten post edytował tehaha 8.05.2010, 17:20:49
Go to the top of the page
+Quote Post
kapuch
post 8.05.2010, 17:22:55
Post #3





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

Ostrzeżenie: (0%)
-----

Cytat(tehaha @ 8.05.2010, 18:18:34 ) *
na tej stronie co wskazałeś tło się nie powtarza ani nie dopasowuje do okna, jest tam po prostu duży obrazek

No wlasnie ta strona dopasowuje ten obrazek do rozdzielczosci, bo jesli by tak nie robila, to bym nie widzial calego obrazka, a widze (tyle ze nieco zmniejszony, ale nie uciety).

Zreszta juz sam nie wiem, ma ktos rozdzialke powyzej 1600px width? Bo jestem ciekawy co sie stanie, czy tlo zacznie sie powtarzac, czy tez zostanie wypelnione kolorem tla, a moze w jakis cudowny sposob obrazek wypelni caly obszar smile.gif


Ten post edytował kapuch 8.05.2010, 17:25:48


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
Go to the top of the page
+Quote Post
krzysztof_kf
post 8.05.2010, 17:25:50
Post #4





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Może tak 

[CSS] pobierz, plaintext 
  1. <body style="margin:0px; padding:0px;">
  2. <img src="test.jpg" style="width:100%; height:100%; position: fixed;" alt="moj obrazek"/ >
  3. <div style="position:absolute; top:0px; left:0px; width:100%; height:100%;">
[CSS] pobierz, plaintext
Go to the top of the page
+Quote Post
tehaha
post 8.05.2010, 17:30:37
Post #5





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

Ostrzeżenie: (0%)
-----

nic się nie dopasowuje nie widzisz reszty bo reszta wystaje poza ekran, dałem Ci linki to tych obrazków tła, po za tym gdyby się rzeczywiście dopasowywało to ja też bym widział na cały ekran a nie widzę, mam rozdzielczość 1920x1080 i obrazek tło nie dochodzi do krawędzi przeglądarki, zrób sobie test daj diva 100px x 100px i ustaw jako tło obrazek 800x600 to w divie będzie widoczny tylko kawałek
Go to the top of the page
+Quote Post
kapuch
post 8.05.2010, 17:37:20
Post #6





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

Ostrzeżenie: (0%)
-----

Cytat(tehaha @ 8.05.2010, 18:30:37 ) *
nic się nie dopasowuje nie widzisz reszty bo reszta wystaje poza ekran, dałem Ci linki to tych obrazków tła, po za tym gdyby się rzeczywiście dopasowywało to ja też bym widział na cały ekran a nie widzę, mam rozdzielczość 1920x1080 i obrazek tło nie dochodzi do krawędzi przeglądarki, zrób sobie test daj diva 100px x 100px i ustaw jako tło obrazek 800x600 to w divie będzie widoczny tylko kawałek

No OK, ale jak zrobione jest to, ze przy zmniejszaniu okna przegladarki obrazek tla z lewej strony takze sie chowa, jesli by to byl zwykly obrazek to odleglosci od lewej strony przegladarki, do powiedzmy tej panienki na obrazku, byla by zawsze ta sama, a jednak czesc obrazka z lewej strony takze sie chowa, jak zmieniamy szerokosc okna :/

PS. Powiedz mi, skoro masz wieksza rozdzialke od tego obrazka, to co jest po prawej stronie?
Chamsko ucina sie obrazek, czy moze jest jakies plynne przejscie? A moze jeszcze inaczej?


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
Go to the top of the page
+Quote Post
krzysztof_kf
post 8.05.2010, 17:38:47
Post #7





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

@kapuch Widziałeś mojego wcześniej posta ? hmm.
Go to the top of the page
+Quote Post
tehaha
post 8.05.2010, 17:41:26
Post #8





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

Ostrzeżenie: (0%)
-----

chamsko ucina z obu stron, przesuwa się ponieważ jest to tło diva a nie body, więc zmniejszając okno przeglądarki zmniejszasz diva, wtedy jego środek się przesuwa i dlatego obrazek też się przesuwa, gdyby było przypisane do body to by się nie przesuwało, poza tym jak sam zauważyłeś tło się przesuwa, ale nie zmniejsza
Go to the top of the page
+Quote Post
kapuch
post 8.05.2010, 17:42:45
Post #9





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

Ostrzeżenie: (0%)
-----

Cytat(krzysztof_kf @ 8.05.2010, 18:38:47 ) *
@kapuch Widziałeś mojego wcześniej posta ? hmm.

Tak, sorry zapomnialem odpisac, ten Twoj przyklad robi praktycznie to samo co moj ostatni, czyli automatycznie skaluje obraz tla.
Wszystko ok, ale robi sie nieciekawie przy rozdzialkach panoramicznych (nie proporcionalnych), obrazek jest znieksztalcony :/
Chyba ze cos zle skopiowalem winksmiley.jpg


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
Go to the top of the page
+Quote Post
tehaha
post 8.05.2010, 17:45:56
Post #10





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

Ostrzeżenie: (0%)
-----

no pisałem Ci że rozciąganie nie jest dobrym pomysłem bo nie jesteś wstanie zrobić takie obrazka, żeby po rozciągnięciu na każdej rozdzielczości dobrze wyglądał chyba że będzie to jednolity kolor:), najlepiej rób tak, żeby był jakiś obrazek tła na środku a potem przechodził w jednolity kolor lub gradient
Go to the top of the page
+Quote Post
krzysztof_kf
post 8.05.2010, 17:46:21
Post #11





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

No faktycznie powiem ci zrób tak jak masz ten najlepszy efekt bo nie dopasujesz tła pod wszystkie rozdzielczości niestety ;/
Go to the top of the page
+Quote Post
kapuch
post 8.05.2010, 17:48:50
Post #12





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

Ostrzeżenie: (0%)
-----

Cytat(tehaha @ 8.05.2010, 18:41:26 ) *
chamsko ucina z obu stron, przesuwa się ponieważ jest to tło diva a nie body, więc zmniejszając okno przeglądarki zmniejszasz diva, wtedy jego środek się przesuwa i dlatego obrazek też się przesuwa, gdyby było przypisane do body to by się nie przesuwało, poza tym jak sam zauważyłeś tło się przesuwa, ale nie zmniejsza

Tak, racja, cos mi sie przewidzialo z tym dopasowywaniem, moze zmylilo mnie wlasnie to, ze ten obrazek przesuwa sie rowniez w lewo winksmiley.jpg
Dodalem do "background: url() no-repeat CENTER TOP FIXED" i mam taki sam efekt.
Skoro takie strony zmuszone sa do "chamskiego ucinania", to wychodzi na to, ze innego sposobu nie ma, wiec musze zrobic tlo z m/w 1600px szerokosci, bo 800x600 to duzo za malo winksmiley.jpg
Dzieki Wam za pomoc, pokombinuje winksmiley.jpg

BTW. Jest jakis program (typu ieTester), badz strona, ktora miala by mozliwosc sprawdzenia wygladu strony, na roznych rozdzielczosciach?


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
Go to the top of the page
+Quote Post
tehaha
post 8.05.2010, 17:52:40
Post #13





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

Ostrzeżenie: (0%)
-----

nie wiem czy jest taki program ale jak znajdziesz to daj znać też by mi się taki przydał, nie musi chamsko ucinać, napisałem Ci wyżej zrób tak żeby obrazek na końcu po bokach i na dole miał płynne przejście w jednolity kolor tła albo gradient w zależności od tego jakie masz tło i będzie ok na każdej rozdzielczości
Go to the top of the page
+Quote Post
krzysztof_kf
post 8.05.2010, 17:52:42
Post #14





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Cytat(kapuch @ 8.05.2010, 18:48:50 ) *
BTW. Jest jakis program (typu ieTester), badz strona, ktora miala by mozliwosc sprawdzenia wygladu strony, na roznych rozdzielczosciach?



Wręcz nie możliwe jest takie coś ;/
Go to the top of the page
+Quote Post
tehaha
post 8.05.2010, 17:57:49
Post #15





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

Ostrzeżenie: (0%)
-----

tak samemu to możesz se jedynie pomniejszyć obraz w przeglądarce np. jak używasz FF to naciśnij kilka razy ctrl+ znak minusa
Go to the top of the page
+Quote Post
kapuch
post 8.05.2010, 18:02:18
Post #16





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

Ostrzeżenie: (0%)
-----

Cytat(krzysztof_kf @ 8.05.2010, 18:52:42 ) *
Wręcz nie możliwe jest takie coś ;/

Ale cos w stylu tej strony co robi zrzuty ekranow danej strony z roznych przegladarek, rozumiem ze to dziala na zasadzie, ze na serwerze odpalana jest dana przegladarka, laduje dana strone, robi zrzut i przesyla na strone.
Jesli tak, to mozna by bylo na takim serwerze ustawic najwieksza z mozliwych rozdzialke i wtedy robic zrzuty, w efekcie mieli bysmy obrazek, ktory na naszych kompach nie miescil by sie na ekranie, ale po przesunieciu poziomym scrollem, widzieli bysmy to, czego nie mozemy zobaczyc u siebie smile.gif
Wystarczyla by jedna b.duza rozdzialka smile.gif
Wiem, to tylko teoria, ale wydaje mi sie ze do zrobienia smile.gif
Pozdrawiam i dzieki za pomoc!

Cytat(tehaha @ 8.05.2010, 18:57:49 ) *
tak samemu to możesz se jedynie pomniejszyć obraz w przeglądarce np. jak używasz FF to naciśnij kilka razy ctrl+ znak minusa

Tez prawda, jakos o tym nie pomyslalem smile.gif
I chyba nawet da nam to ten sam efekt, co zmiana rozdzielczosci smile.gif


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 25.04.2025 - 05:41
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn