Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML] Stałe tło, ale nie do końca...
lukash82
post
Post #1





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

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

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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
lukash82
post
Post #2





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

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

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
Go to the top of the page
+Quote Post

Posty w temacie
- lukash82   [CSS][HTML] Stałe tło   4.12.2012, 11:37:35
- - fate   Jeżeli Cię zrozumiałem to mam trywialne rozwiazani...   4.12.2012, 13:01:54
- - Sephirus   Nie wiem czy o to chodziło ale... Pisane na szybk...   4.12.2012, 13:06:45
- - lukash82   Witam, @Sephirus prawie idealnie zobrazowałeś to ...   4.12.2012, 15:51:58
- - Sephirus   Namotałeś nieco - z tego względu, że tło musi być ...   4.12.2012, 16:42:21
- - lukash82   Super, o to chodziło. Choć teraz zastanawiam się n...   4.12.2012, 18:31:31

« 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 · Przełącz na: Linearny+ · Drzewo

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

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