Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [css] skalowanie obrazka tła
mczlowiek
post 5.11.2009, 08:32:20
Post #1





Grupa: Zarejestrowani
Postów: 210
Pomógł: 0
Dołączył: 26.05.2008

Ostrzeżenie: (10%)
X----


Witam, czy jest możliwość i jeśli tak to jak dopasować obrazek tła, tak by dopasowywał się do rozmiaru okna?
Przykładowo mam obrazek tła 800/600px,
i teraz jak wielkość okna jest większa to tło się rozciąga i odwrotnie w przypadku mniejszego rozmiaru okna.
Pozdrawiam!
Go to the top of the page
+Quote Post
blim
post 5.11.2009, 09:55:49
Post #2





Grupa: Zarejestrowani
Postów: 18
Pomógł: 2
Dołączył: 13.10.2008
Skąd: Trójmiasto

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


Spróbuj ustawić wielkość obrazka procentowo zamiast w pixelach


--------------------
Może tutaj - noclegi
Serwisy WWW, komputery
Go to the top of the page
+Quote Post
mczlowiek
post 5.11.2009, 10:01:22
Post #3





Grupa: Zarejestrowani
Postów: 210
Pomógł: 0
Dołączył: 26.05.2008

Ostrzeżenie: (10%)
X----


mam tak to wpisane:
  1. body {background:#F2F2F2 url(../images/body_bg.gif) repeat scroll 0 0;}


więc nie za bardzo jest możliwość zastosowania tej wskazowki...

Go to the top of the page
+Quote Post
seth-kk
post 5.11.2009, 12:30:31
Post #4





Grupa: Zarejestrowani
Postów: 444
Pomógł: 79
Dołączył: 26.05.2009

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


sklaowanie tla nie jest mozliwe za pomoca css
mozesz zapetlac go lub kombinowac wrzucajac <img /> warstwe nizej


--------------------
Go to the top of the page
+Quote Post
Pawel_W
post 5.11.2009, 15:19:02
Post #5





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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


http://www.kurshtml.boo.pl/przyklady/css/tlo_rozmiary.html

tu masz to co potrzebujesz
Go to the top of the page
+Quote Post
-Gość-
post 29.04.2012, 20:02:08
Post #6





Goście







da się skalować obrazek tła w css, przykładowy kod wygląda tak:
background-image:url(adres/obrazek.gif); background-attachment: fixed; background-size: 100% 100%;

... uwaga, obrazki w jpg nie wchodzą... zaś opcja background-attachment: fixed; czyni, że tło się nie przesuwa przy przewijaniu treści na stronie (nie wiem czy jest potrzebne przy właściwym skalowaniu)... :3
jak to jest, że wszędzie piszą, że się nie da, a mnie takim prostym sposobem się to udało tongue.gif
pozdrawiam smile.gif
Go to the top of the page
+Quote Post
--piotr--
post 25.05.2013, 07:52:25
Post #7





Goście







Każdy z tych sposóbów zawodzi.
Prawdziwe skalowanie tła powinno działać tak:

Zdjęcie o dowolnych proporcjach skaluje się do całego ekranu niezależnie czy mamy "stary monitor" czy "panoramiczny" bez wzgledu na przeglądarkę, jej paski narzedzi itp w taki sposób, że pokrywa całą powierzchnię ekranu. Różnice w kształcie okna do wyświetlenia obrazka niweluje się tym, że części skrajne obrazka "wychodzą" poza ekran. W ten sposób obrazek nie jest ani rościągnięty, ani scisniety. Jezeli okno przeglądarki ie jest zmaksymalizowane to mozesz zmieniać jego wymiary. Przy dowolnych proporcach H i V obraze nie zniekształca sie tylko się zmniejsza i zaleznie od wymiarów większe lub mniejsze zewnętrzne fragmenty są wysuwane poza margines.

Jak to zrobić ?
Go to the top of the page
+Quote Post
sweter
post 25.05.2013, 08:17:23
Post #8





Grupa: Zarejestrowani
Postów: 623
Pomógł: 11
Dołączył: 1.01.2009
Skąd: Wrocław

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


Robisz warstwę niżej z obrazkiem i za pomocą JavaScript zmieniasz jej położenie i wymiary na zdarzeniu resize,


--------------------
Go to the top of the page
+Quote Post
L0k0
post 6.06.2014, 10:19:38
Post #9





Grupa: Zarejestrowani
Postów: 161
Pomógł: 4
Dołączył: 18.03.2011

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


Temat stary ale może komuś się przyda odpowiedź:

  1. background: url(obrazek.jpg) no-repeat scroll center;


Użycie tego rozwiązania skaluje obrazek i nie rozjeżdża się przy skalowaniu okna przeglądarki.

Pozdrawiam!
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 23.05.2025 - 05:55