Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] Stały backgrond niezależny od rozmiaru okna
Darekxp
post
Post #1





Grupa: Zarejestrowani
Postów: 117
Pomógł: 0
Dołączył: 13.05.2007

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

Witam!

Zastanawia mnie jak wykonać taki background - http://swedishseasons.com/

Niezależnie jaka jest rozdzielczość i oddalenie/przybliżenie w opcjach przeglądarki zdjęcie zachowuje cały czas swoje stałe proporcje.

Za pomoc z góry dzięki:)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
zamper
post
Post #2





Grupa: Zarejestrowani
Postów: 156
Pomógł: 17
Dołączył: 11.12.2010
Skąd: Częstochowa

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

To są style diva z tłem
Polecam FireBug'a
[CSS] pobierz, plaintext 
  1.     background: url("images/for-1.jpg") repeat scroll center bottom / 100% auto transparent;
  2.     bottom: 0;
  3.     height: 100%;
  4.     left: 0;
  5.     position: absolute;
  6.     right: 0;
  7.     top: 0;
  8.     width: 100%;
  9.     z-index: 100;
[CSS] pobierz, plaintext
Go to the top of the page
+Quote Post
Darekxp
post
Post #3





Grupa: Zarejestrowani
Postów: 117
Pomógł: 0
Dołączył: 13.05.2007

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

A zdjęcia jakiej rozdzielczości i wielkości max proponujesz wrzucać ?
Go to the top of the page
+Quote Post
ShadowD
post
Post #4





Grupa: Zarejestrowani
Postów: 1 333
Pomógł: 137
Dołączył: 25.03.2008
Skąd: jesteś??

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

http://vegas.jaysalvat.com

Polecam i nie raz już polecałem tą bibliotekę tutaj. Jeśli chodzi o wielkość fotek to proponuję fulhd ~1900x1060 sprawdź sobie dokładnie, tylko ogromne wyjątki mają monitory z większą rozdzielczością, a nawet jak ktoś ma większy monitor to upakowanie pixeli jest tak duże, że nie powinno być wielkich strat na jakości.

Dodam że bardzo ważnym jest dobranie odpowiedniego zdjęcia, takiego z brakiem gradientów przechodzących np. z zielonego jasnego w zielony jaśniejszy minimalnie - tak by po zoptymalizowaniu grafiki nie wyszła sieczka lub przeskoki w kolorach, a optymalizacja takiego tła powinna być największa jak to jest możliwe bez znacznej straty na jakości. Mimo że internet 3mb to prawie norma to zdjęcie 3mb będzie się na takim łączu wczytywać 10 sekund, więc sensowną normą było by dojście do wyniku 1/2 mb.
Go to the top of the page
+Quote Post
Darekxp
post
Post #5





Grupa: Zarejestrowani
Postów: 117
Pomógł: 0
Dołączył: 13.05.2007

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

Wygląda extra, ale mam problem z instalacją. Poza moją treścią w body są jakieś divy? Bo czytam dokumentację ale tylko js widzę, ale nie trybi.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  5. <script type="text/javascript" src="/vegas/jquery.vegas.js"></script>
  6. <link rel="stylesheet" type="text/css" href="/vegas/jquery.vegas.css"/>
  7. <script type="text/javascript">
  8. $( function() {
  9.   $.vegas({
  10.     src:'/images/1.jpg'
  11.   });
  12.   $.vegas('overlay', {
  13.     src:'/overlays/13.png'
  14.   });
  15. });
  16. </script>
  17. </head>
  18. <body>
  19. <p>test</p>
  20. </body>
  21. </html>
[HTML] pobierz, plaintext


Ten post edytował Darekxp 4.02.2013, 23:06:31
Go to the top of the page
+Quote Post
ShadowD
post
Post #6





Grupa: Zarejestrowani
Postów: 1 333
Pomógł: 137
Dołączył: 25.03.2008
Skąd: jesteś??

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

Js i css tylko, całość pod bodu się podpina.

Zobacz w firebug jak wygląda kod i czy coś się dodało do body, jak nie spróbuj:

[PHP] pobierz, plaintext 
  1.     $.vegas({
  2.     src:'/img/background.jpg',
  3.     valign:'20%', // top, center, bottom or %
  4.     align:'right' // left, center, right or %
  5.     });
[PHP] pobierz, plaintext


I upewnij się czy na pewno podajesz dobre linki do biblioteki i css.
Go to the top of the page
+Quote Post
Darekxp
post
Post #7





Grupa: Zarejestrowani
Postów: 117
Pomógł: 0
Dołączył: 13.05.2007

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

ścieżki są ok, patrzę w kod, sprawdzam różne rzeczy, pliki istnieją, ale nadal białe tło...
Go to the top of the page
+Quote Post
ShadowD
post
Post #8





Grupa: Zarejestrowani
Postów: 1 333
Pomógł: 137
Dołączył: 25.03.2008
Skąd: jesteś??

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

Daj to gdzieś live.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 15.09.2025 - 10:11
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn