dopasowanie do szerokości ekranu, wyśrodkowanie i tło do połowy, nie wiem jak to wytłumaczyć pisemnie, zajrzyj w temat Opcje

[misiek172]

Witam.

Jakoś pierwszy raz mi sie coś tkaiego trafiło:

Strona o załóżmy szerokości 1000px wyśrodkowana do środka ok, pod nią tło rozciągające się na całą szerokość ekranu ok, banał:

[XML] pobierz, plaintext 
#top{ width: 100%; float: left; background: url('cokolwiek.jpg') repeat-x left top transparent; }
 #top #top_in { margin: 0 auto; width: 1000px; } 
[XML] pobierz, plaintext 

ale, jak zrobić aby cały mechanizm działał tak jak ten powyższy ale tło #top szło do pewnego momentu, powiedzmy do środka strony i koniec...

mam nadzieje, że rozumiecie o co mi chodzi ;p

pozdrawiam

[vieri_pl]

http://jsfiddle.net/Zd2VB/, o coś takiego chodzi? o_O

[misiek172]

nie no czytałeś co pisałem ;p?

powiedzmy ze o to ale ten czerwony pasek ma sie konzcyc zawsze w połowie ekranu, a NIE lecieć do końca

Ten post edytował misiek172 20.04.2012, 14:48:35

[mortus]

Nie ma takiej możliwości. Musiałbyś wrzucić jako tło konkretny obrazek/grafikę.

EDIT1:
W CSS3 pojawia się atrybut background-size to może udało by się to wykorzystać, jednak ze wsparciem dla CSS3 jest różnie.

EDIT2:
Jednak nie uda się bo background-size działa nieco inaczej, niż można by oczekiwać.

Ten post edytował mortus 20.04.2012, 15:26:31

[prowseed]

robisz na poczatku struktury html diva, na wszelki wypadek daj mu jeszcze z-index:-1 zeby nigdzie sie nie wychylal i wbij mu cos jak:

[CSS] pobierz, plaintext 
left: 0px;
top: 0px;
position: fixed;
 z-index: -1;
margin: 0px;
padding: 0px;
width:50%;
[CSS] pobierz, plaintext 

Po przerobieniu pracy @vieri_pl wyglada to tak: http://jsfiddle.net/Zd2VB/2/

Nastepnym razem postaraj sie lepiej opisac swoj problem, bo faktycznie ciezko jest zrozumiec Twoj post w takiej postaci i sam nawet nie wiem, czy o to Ci chodzi.

[misiek172]

no powiedzmy prowseed, że o to ale w moim przypadku ja nie chcę fixed, dobra dam sobie rade ;p

[piotrex41]

Krótka lekcja: (IMG:style_emoticons/default/tongue.gif)

1. Użycie takiego kodu:

Kod

background:url('images/bg1.png') 0px 200px repeat-x;

Powoduje, że tło wyświetla się całe na wysokość (800px) ale jest przesunięte o 200px w dół. Natomiast spokojnie się powiela na całą szerokość, mimo że samo ma 2px szerokości.

2. Użycie takiego kodu:

Kod

background:url('images/bg1.png') 0px -200px repeat-x;

Powoduje, że tło wyświetla się od wysokości 200px (a więc całe wyświetlenie ma wysokość 600px zamiast 800px) i nie jest przesunięte w dół. Natomiast spokojnie się powiela na całą szerokość.

3. Użycie obrazka który zaczyna się 200px niżej (pierwsze 200px jest przeźroczyste) wcale nie przeszkadza w użyciu repeat-x. Dobrze się powiela i wygląda tak samo jak we wniosku 1. (Tło miało 1000px wysokości, ale pierwsze 200px było przeźroczyste a poniżej było moje tło 800px).

Analogicznie sprawa ma się z tłem kolorowym (bez obrazka), lub z ustawieniem tła do 50% wysokości strony (pierwsze 50%, a później tła nie ma). Jeśli natomiast chcesz użyskać efekt tła stałego do połowy ekranu, to nie obejdzie się bez użycia position:fixed lub static.

Mam nadzieję że pomoże Ci to zrobić tło takie jak sobie życzysz.

Pozdrawiam,
~piotrex41

Ten post edytował piotrex41 9.07.2012, 11:59:39