Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: rozciąganie grafiki
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
gagatek
szukam, i nie wiem jak to wyszukac. Mam problem mam grafikę na tło, u góry i dołu są obrazki a wewnątrz grafika jest jednolita. I mam problem z tym że ze wzrostem zawartości na stronie grafika tło będie się powtarzać, jednak chce żeby te obrazki na dole i u góry były cały czas tam a "wnętrze" tej grafiki się rozciągało. Mniej więcej wiem jak to zrobić, powinienem wyciąć pasek tego tła w szerz i zrobić tak żeby z on się powielał wraz ze wzrostem treści na stronie. Ale własnie tu jest pytanie, jak to zrobić, czy musze podzielić to tło na 3 divy i żeby w tym środkowym się powielało czy w jakiś inny sposób? Póki co mam coś takiego:

  1. background: url(../img/movie_back.jpg);
  2. width:900px;
  3. margin: -35px auto;
  4. min-height:583px;
  5. border:2px solid #fff;
  6. outline:1px solid #ccc;
  7. text-align:left;
_kama
Ja np przy niewielkich grafikach (buttony, menu) stosuje rozwiazanie typu 2 kontenery jeden w drugim bo lubie kiedy struktura htmla jest ladna i poprawna semantycznie (tj nie jakies 3 kontenery obok siebie)

  1. <div class="menu">
  2. <div class="menu-wrapper">
  3. tu tresc ktora moze sie powiekszac i wtedy grafika sie rozszerza
  4. </div>
  5. </div>


i w tej sytuacji div.menu ma w tle obrazek b wysoki ktory ma dolny element graficzny (ta indywidualna czesc i reszta to ta powstarzajaca sie czesc jednolitego tla). to tlo ukladasz od dolu. (background-position: bottom). a drug div ma w tle gorna grafike ktora ukladasz na gorze (background-position: top). Oczywiscie w obu przypadkach no-repeat. Takie rozwiazanie dobrze sie sprawdza przy elementach przy ktorych wiesz ze wysokosc moze byc zmienna ale nie osiagnie jakiejs nieobliczalnej wysokosci (dla ktorej obrazek pierwszego diva musialby byc gigantyyyyyycznie wysoki)
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.