Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xHTML-CSS] Obrazek na całą stronę
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
dareksbs
Witam,

trochę posiadziałem, poszukałem i nic ciekawego nie znalazłem, a konkretniej chcę stworzyć layout strony która będzie miała w tle obrazek, ale taki który się nie będzie powtarzał a będzie się dopasowywał do okna przeglądarki. Oczywiście wiem, aby użyć w CSS przykładowo funkcje no-repeat i rozmiar 100% ale tu nie oto chodzi, tzn. jeśli zastosuje rozmiar 100% to tło się będzie zmniejszało i powiększało, ale wszystkie dodatkowe rzeczy w stronie nie !

na stronie chcę zamieścić jeszcze chmurkę w lewym górnym (oczywiście w osobnym divie) oraz pole z tekstem na środku strony.

Teraz pytanie do was, jaki sposób będzie najlepszy aby coś takiego osiągnąć (pisałem dużo kodu pod szablon, ale jeszcze nigdy nie robiłem go ze zdjęciem na całą stronę)

Z góry dziękuje i pozdrawiam
d3ut3r
http://www.w3schools.com/cssref/pr_background-attachment.asp

Możesz ustawić fixed wówczas obrazek nie będzie się poruszał podczas przewijania. O ile dobrze zrozumiałem twój problem.

dareksbs
tylko jak użyje tego kodu :

  1. body
  2. {
  3. background-image:url('smiley.gif');
  4. background-repeat:no-repeat;
  5. background-attachment:fixed;
  6. }


na obrazku który ma wymiary 4000 na 3000 to widzę tylko górę obrazka smile.gif chodzi mi o rozwiązanie które by wypełniło całą strone tym obrazkiem.
d3ut3r
css3 ma coś takiego jak backround-size, innym sposobem jest pobieranie rozmiarów okna użytkownika za pomocą JavaScript i generowanie odpowiednio wyskalowanego obrazu w locie lub przygotowanie kilku wersji w różnych rozmiarach.
acidm
backround-size nie zadziała w niestety w ie poniżej 9 wersji,ale można dodac tlo jako <img > do body nalepiej na poczatku i tak ostylowac :



  1. #naszObrazek {
  2. height: 100%;
  3. width: 100%;
  4. position: fixed;
  5. margin: 0px;
  6. padding: 0px;
  7. z-index: -1;
  8. left: 0px;
  9. top: 0px;
  10. display: block;
  11. background-repeat: no-repeat;
  12. }
  13. body {
  14. margin: 0px;
  15. padding: 0px;
  16.  
  17. }


W ten sposób nie musimy angażowac js
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.