Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Stałe tło
Forum PHP.pl > Forum > Przedszkole
lukash82
4.12.2012, 11:37:35
Witam,

wydaje się, że prosta sprawa ale utknąłem w jednym miejscu kodu i jakoś nie mogę tego przeskoczyć... Mam prostą stronkę, powiedzmy coś takiego:

[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="page">
  3. 	<div class="top"></div>
  4. 	<div class="middle"></div>
  5. 	<div class="footer"></div>
  6. </div>
  7. </body>
[HTML] pobierz, plaintext


I mam w szablonie graficznym w tło dodać takie dosyć duże zdjęcie, stałe wobec div-a "page". A więc prosta sprawa:

[CSS] pobierz, plaintext 
  1. body{ 
  2. 	margin			: 0;
  3. 	padding			: 0;
  4. 	background		: url('images/layout.jpg') top center no-repeat fixed;}
[CSS] pobierz, plaintext


Otrzymujemy efekt taki, że jeżeli jest więcej treści w div-ie "page" to jest on przewijalny w dół, ale tło jest statyczne, tzn tyle ile zmieściło się zdjęcia od góry ekranu.

Problem w tym, że zdjęcie w tle ma jakiś przekaz ale nie mieści się na ekranie w całości. Tyle ile od góry mamy miejsca tyle go widać... Chciałbym uzyskac efekt taki, że tło jest stałe tak jak teraz ale jeśli uzytkownik przewija stronę w dół, to w momencie gdy zaczyna dochodzi do stopki tło także zaczyna się przesuwać w górę... Widzę to oczami wyobraźni ale jakoś nie mogę tego zakodować... A może to jest niemożliwe technicznie...? Nie wiem czy dobrze to opisałem więc jak coś jest niejasne to proszę pytać. Jeśli macie jakieś pomysły to proszę o podpowiedź.

PS. Celem testów można podłożyć pod plik tła w powyższym kodzie jakiekolwiek zdjęcie z aparatu o wysokości np. 1500px, a do znacznika "middle" dopisać jakąś wysokość typu 3000px, etc.
fate
4.12.2012, 13:01:54
Jeżeli Cię zrozumiałem to mam trywialne rozwiazanie myślę. Musisz dać minimalną wysokość diva taka jak wysokosc obrazka tła wtedy wyświetli Ci całe tło no izostawić tą pozycję fixed jak treść będzie większa będzie się przewijało jak chciałeś. Nie wszystkie przeglądarki obsługują min-height więc tło może być w divie kontenerze obejmujacym a tresc w umieszczonym w nim koljnym divie.
Spróbuj jak o to biega sekret.gif
Sephirus
4.12.2012, 13:06:45
Nie wiem czy o to chodziło ale...

Pisane na szybko w czystym JS - musisz zmienić/dopasować pod siebie

http://jsfiddle.net/s8cN9/1/
lukash82
4.12.2012, 15:51:58
Witam,

@Sephirus prawie idealnie zobrazowałeś to co sobie wyobrażałem... Spróbuje obydwu rozwiązań.

Witam ponownie,

1 rozwiązanie niestety nie działa. Drugie działa tak jak to miało być w zamyśle, ale tylko dla div-a przez co tworzy się dodatkowy suwak przy większej ilości treści. Próbowałem to przełożyć na wyższy poziom do <body> ale coś niebardzo to działa..., albo sam coś pochrzaniłem...

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="pl">
  3. <head>
  4. <script>
  5. 	function scrollTheFreakingBackground() {
  6. 		var body = document.getElementById('body');
  7. 		var scrollPosition = parseInt(body.scrollTop);
  8. 		var scrollHeight = parseInt(body.scrollHeight);
  9. 		var offsetHeight = parseInt(body.offsetHeight);
  10. 		var pictureHeight = 1200;
  11. 		var scrollPercent = scrollPosition / (scrollHeight - offsetHeight);
  12. 		var newPositionOfBackground = -1 * (pictureHeight - offsetHeight) * scrollPercent;
  13. 		body.style.backgroundPosition = 'center ' + newPositionOfBackground + 'px';
  14. 	}
  15. 	document.getElementById('body').addEventListener('scroll',scrollTheFreakingBackground,false);
  16. </script>
  17. <style>
  18. 	body{ 
  19. 		margin			: 0;
  20. 		padding			: 0;
  21. 		overflow			: auto; 
  22. 		background		: green url('http://www.mega-tapety.info/wallpapers/krajobrazy/morzairzeki/tapety_na_pulpit_mega-tapety.info%20(177).jpg') top center no-repeat;}
  23. 	.txt{
  24. 		height			: 2000px;
  25. 		width				: 500px;
  26. 		background		: red;
  27. 		margin			: 0 auto;}
  28. </style>
  29. </head>
  30. <body id="body">
  31. <div class="txt"></div>
  32. </body>
  33. </html>
[HTML] pobierz, plaintext
Sephirus
4.12.2012, 16:42:21
Namotałeś nieco - z tego względu, że tło musi być tego samego elementu co przewijanie - zaraz poprawię i wrzuce wink.gif

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="pl">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <style type="text/css">
  6. 	body {
  7. 		margin			: 0;
  8. 		padding			: 0;
  9. 		overflow                : auto;
  10.                 height:200px;
  11. 		background		: green url('http://www.mega-tapety.info/wallpapers/krajobrazy/morzairzeki/tapety_na_pulpit_mega-tapety.info%20(177).jpg') center 0 no-repeat;
  12.         }
  13. 	.txt{
  14. 		height			: 2000px;
  15. 		width				: 500px;
  16. 		background		: rgba(255,0,0,0.5);
  17. 		margin			: 0 auto;}
  18. </style>
  19. <script type="text/javascript">
  20. function scrollTheFreakingBackground() {
  21.         var body = document.getElementById('body');
  22.         var scrollPosition = parseInt(body.scrollTop);
  23.         var scrollHeight = parseInt(body.scrollHeight);
  24.         var offsetHeight = parseInt(window.innerHeight);
  25.         var pictureHeight = 1200;
  26.         var scrollPercent = scrollPosition / (scrollHeight - offsetHeight);
  27.         if(pictureHeight > scrollHeight) {
  28.             var newPositionOfBackground = -1 * (pictureHeight - scrollHeight) * scrollPercent;
  29.         } else {
  30.             var newPositionOfBackground = (scrollHeight - pictureHeight) * scrollPercent;
  31.         }
  32.         body.style.backgroundPosition = 'center ' + Math.round(newPositionOfBackground) + 'px';
  33. }
  34.  
  35. window.addEventListener('load',function () {
  36.     window.addEventListener('scroll',scrollTheFreakingBackground,true);
  37. },false);
  38. </script>
  39. </head>
  40. <body id="body">
  41. <div class="txt">
  42. </div>
  43. </body>
  44. </html>
[HTML] pobierz, plaintext


Powinno śmigać na stronach mniejszych niż obrazek i większych niż obrazek - musisz jedynie dopracować kompatybilność z przeglądarkami (konkretnie z IE) smile.gif

EDIT: Ten kod przedstawia tylko idee - musisz go nieco zoptymalizować by zwiększyć wydajność (nie przy każdym wywołaniu ta funkcja musi pobierać wszystkie te parametry wink.gif)
lukash82
4.12.2012, 18:31:31
Super, o to chodziło. Choć teraz zastanawiam się nad ostatecznym efektem jaki został uzyskany. Tło strasznie przeskakuje przy przewijaniu i na dłuższą metę może to się okazać średnio efektowne... Ale wielkie dzięki za pomoc.
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.