Forum PHP.pl > [css][html] Podwójne tło

Pomoc - Szukaj - Użytkownicy - Kalendarz

Dominis

5.02.2012, 11:05:26

Witam,
mam problem.
Potrzebuję tak umieścić ten pasek z prostokątami, aby szedł od lewej strony (w lewym kierunku) strony , a następnie, z prawej strony, szedl od prawej strony, w prawa stronę.

nie mogę zrobić:

[HTML] pobierz, plaintext 
repeat-x
[HTML] pobierz, plaintext

ponieważ jeśli strona będzie wyświetlana w różnych rozdzielczościach, to będzie niestety problem, poniewaz te prostokąciki, będa innaczej się układały.
Mam nadzieje że zdjęcie pomoże troszke zrozumieć temat.

Zdjęcie:
Szare pole, będzie to strona o stałej szerokości, 980px, wyśrodkowane.
Problem, Prostokąty mają zaczynać się od tej strony(szarego pola) i jeden ma powtarzać sie w lewa strone, a drugi w prawa strone(od konców szarego pola)

Ktoś ma pomysł jak to mogę uczynic?

Damonsson

5.02.2012, 11:25:49

multiple background?

prowseed

5.02.2012, 13:54:05

multiple backgrounds spoko, ale jak to wypozycjonowac?

Poza tym nawet najnowsze przegladarki jeszcze roznie interpretuja (jezeli w ogole) wszystkie właściwości. Sposoby rozne, albo jeden ogromny jpg o szerokosci 3000px (najgorsza opcja z mozliwych

) centrowany na srodku albo dwa divy i tutaj:
1. Na bokach strony zajmujace obszar pozostaly
2. Pod strona podzielone na 50%

pozniej w nich sobie ukladasz background od lewej i od prawej i dajesz repeat-x.

by_ikar

5.02.2012, 14:37:09

W tych tematach: http://forum.php.pl/index.php?showtopic=191714 oraz http://forum.php.pl/index.php?showtopic=191629 podałem przykładowy kod, oraz mniej więcej opisałem jak coś takiego można w łatwy sposób osiągnąć.

Dominis

6.02.2012, 00:25:55

dzięki za zainteresowanie..

by_ikar, niestety tam nie znalalzlem inf, które by mi pomogły.

Próbowałem podzielić storny na 3 divy, tzn, jeden div to background, drugi div to strona, trzeci div to background prawy.

Niestety nie udało mi się tego wyśrodkować, ani dynamicznie ustawić szerokość.

Divy ustawiałem obok siebie za pomocą float: left;
Może coś źle kombinowałem?

by_ikar

6.02.2012, 09:16:15

Nie wiem po co te floaty, można spróbować rozwiązać to inaczej, aczkolwiek nie tak jakbyś chciał, i musiałbyś stworzyć większe tło, w sensie szersze, które by się powielało w dół, o ile powinno się powielać w dół. Następnie pobawić się marginesem, żeby obniżyć trochę tło strony i całość mogłaby tak wyglądać:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
    <style>
        * { margin: 0; padding: 0; }
        html, body { height: 100%; }
        body { background: #fff url("http://img23.imageshack.us/img23/4026/bodybackgroundv.jpg") repeat-x; text-align: center; }
 
        #container { width: 100%; height: auto; clear: both; position: relative; background: url("http://img651.imageshack.us/img651/5413/containerbackground.jpg") top center repeat-y; margin-top: 160px; }
 
        .wrapper { width: 980px; height: auto; margin: 0 auto; position: relative; top: -160px; }
 
        /* ta część jest zbędna, ale dałem wysokość, żeby strona miała jakąś wysokość, oraz tło żeby było wiadomo gdzie jest nasz kontenet ;) */
         .wrapper { background: #9f9d9d; min-height: 1000px; }
    </style>
</head>
<body>
<div id="container">
    <div class="wrapper">
 
    </div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

Tyle że tło trzeba by zrobić jeszcze szersze, można je zrobić niższe (wysokość/height) i przy odpowiedniej szerokości nawet w większych rozdzielczościach nie było by widać że się nie powiela.

Dominis

6.02.2012, 09:30:45

Dzięki "by_ikar", z tego cos sobie już zrobie;)

by_ikar

6.02.2012, 11:14:11

Nie ma sprawy, pamiętaj żeby obrazek, który w sumie będzie dość wielki, żeby odpowiednio zapisać go, najlepiej obniżając mu jakość i sprawdzać czy będzie widać jakieś artefakty, jeżeli nie, to próbować obniżać aż do momentu pojawienia się artefaktów. Tak żeby zyskać trochę na wadze pliku, co by 200-300kb nie ważył

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.