Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: blokada tła CSS body...
Forum PHP.pl > Forum > Po stronie przeglądarki
rapiduzz
17.07.2011, 20:50:29
Witam

To mój pierwszy post, więc proszę o wyrozumiałość biggrin.gif
Utworzyłem tło z 1px powtarzane w y biało-czarne (50%x%50%) tak żeby było na środku.

Wszystko pięknie tylko jak zmniejszam okno przeglądarki to tło się dynamicznie przesuwa i robi się mały bałagan względem innych obiektów na stronce...
Czy wie ktoś może jak zablokować tło żeby pojawiły się suwaki i tło było nieruchome?
z góry dzieki!

[HTML] pobierz, plaintext 
  1. body {
  2.     background:url(tlo.gif) repeat-y scroll center top;
  3.     margin: 0;
  4.     padding: 0;
  5.     width: 100%;
  6.     }
[HTML] pobierz, plaintext
morbic
17.07.2011, 21:19:52 
[CSS] pobierz, plaintext 
  1. body {
  2.     background:url(tlo.gif) repeat-y fixed center top;
  3.     margin: 0;
  4.     padding: 0;
  5.     width: 100%;
  6.     }
[CSS] pobierz, plaintext


Może o to chodziło?
rapiduzz
17.07.2011, 21:34:38
Niestety nie działa.
Fixed to raczej się będzie przesuwać.
Tło mam w rozmiarze 1800px x 1px.
Jakieś pomysły?
morbic
17.07.2011, 21:39:34
Przy wartości fixed tło jest nieruchome: http://pl.html.net/tutorials/css/lesson3.php#s5

Zgodnie z przykładem, który wkleiłeś, przy fixed tło powinno być nieruchome.

Możesz jeszcze spróbować:
[CSS] pobierz, plaintext 
  1. body, html {
  2.     background:url(tlo.gif) repeat-y fixed center top;
  3.     margin: 0;
  4.     padding: 0;
  5.     width: 100%;
  6.     }
[CSS] pobierz, plaintext
rapiduzz
17.07.2011, 21:59:04
Obojętnie czy dam fixed czy scroll to jak złapie kursorem za prawą krawędź przeglądarki i przesuwam w lewo to tło mi skaluje do środka względem okna przeglądarki.

[HTML] pobierz, plaintext 
  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css"> 
  7. body {
  8.     background:url(bcg.gif) repeat-y fixed center top;
  9.     margin: 0;
  10.     padding: 0;
  11. }
  12. <style
  13. </head>
  14.  
  15. <body>
  16. </body>
  17. </html>
[HTML] pobierz, plaintext
morbic
17.07.2011, 22:04:30
Ach, o to Ci chodzi. To zachowuje się prawidłowo, bo masz "center top"

Musisz ustalić twarde granice:
[CSS] pobierz, plaintext 
  1. body, html {
  2.     background:url(tlo.gif) repeat-y fixed 100px 0;
  3.     margin: 0;
  4.     padding: 0;
  5.     width: 100%;
  6.     }
[CSS] pobierz, plaintext



Jeżeli to nie wyczerpuje problemu, to zostaje JavaScript, ewentualnie inne kombinacje, ale mam za mało informacji, żeby cokolwiek konkretnie doradzić.
toaspzoo
17.07.2011, 22:05:58
position: fixed
rapiduzz
17.07.2011, 22:13:57
Thx dokładnie tak ,ale jak ustawie te granice to tło przestaje być na środku. Mogę je zrobić pod konkretną rozdzielczość, ale strona ma być wyświetlana na różnych rozdzielczościach i tło ma być zawsze czarno-białe. Nie znam się zbytnio na JS. Może jest jeszcze jakaś inna opcja? rolleyes.gif
morbic
17.07.2011, 22:19:15
Ale w tym momencie już się gubię. Chcesz, żeby tło było na środku, ale jak się zmniejszy przeglądarkę, to już nie. Co jeśli ktoś otworzy stronę ze zmniejszoną przeglądarką? Wtedy ma tak zostać, nawet jeśli ktoś przeglądarkę zmaksymalizuje? Czy ma być jak przy zmaksymalizowanej?

Nie za bardzo rozumiem co chcesz w ten sposób osiągnąć. A może próbujesz po prostu utrzymać tło pod jakimś elementem strony, który masz na środku? Chociaż wtedy "center top" działałoby idealnie.

Pokaż dokładnie co chcesz osiągnąć, najlepiej z jakimś screenem, a będzie łatwiej pomóc.
rapiduzz
17.07.2011, 22:49:09
Chcę żeby tło było zawsze na środku, a nie przesuwało się dynamicznie w zależności od rozmiaru okna przeglądarki.
Żeby tło było wyśrodkowane i statyczne, a po zmniejszeniu okna pojawiły się suwaki.

Tak to wygląda na pełnym oknie przeglądarki:

http://www.fotosik.pl/pokaz_obrazek/02bd3f43094f505a.html

a jak zmniejszę okno to czarna połówka tła przesuwa się aż do menu i layout się rozjeżdża
http://www.fotosik.pl/pokaz_obrazek/c8804561271af72d.html
morbic
17.07.2011, 23:07:10
Daj wszystko w <div></div> o odpowiedniej szerokości i pod nim ustaw tło z "center top". Ewentualnie pokombinuj też z overflow: scroll;
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.