Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]Zdjecie jako tlo strony. Problem
Forum PHP.pl > Forum > Przedszkole
kapuch
8.05.2010, 17:03:49
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?
tehaha
8.05.2010, 17: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
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
kapuch
8.05.2010, 17:22:55
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
krzysztof_kf
8.05.2010, 17:25:50
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
tehaha
8.05.2010, 17: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
kapuch
8.05.2010, 17:37:20
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?
krzysztof_kf
8.05.2010, 17:38:47
@kapuch Widziałeś mojego wcześniej posta ? hmm.
tehaha
8.05.2010, 17: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
kapuch
8.05.2010, 17:42:45
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
tehaha
8.05.2010, 17:45:56
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
krzysztof_kf
8.05.2010, 17:46:21
No faktycznie powiem ci zrób tak jak masz ten najlepszy efekt bo nie dopasujesz tła pod wszystkie rozdzielczości niestety ;/
kapuch
8.05.2010, 17:48:50
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?
tehaha
8.05.2010, 17:52:40
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
krzysztof_kf
8.05.2010, 17:52:42
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ś ;/
tehaha
8.05.2010, 17: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
kapuch
8.05.2010, 18:02:18
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
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.