[HTML][CSS]Tło strony zależne od rozdzielczości Opcje

[alex19]

Potrzebuję zrobić na stronie tło, które będzie się automatycznie dobudowywało w zależności od rozdzielczości ekranu.
Założenie jest takie, że domyślnie mamy jakiś rozmiar ekranu, a właściwie DIV'a, który jest wycentrowany na stronie.
Teraz powiedzmy, że DIV ma szerokość 600px. Na niego jest nałożone tło obrazkowe i wszystko gra. Na całą stronę jest ustawione czarne tło. Jeśli przeglądarka będzie miała okienko szerokości 600px, to zobaczymy dokładnie tego DIVa na środku.
Problem pojawia się jak okno będzie szersze, bo to "tło" z DIVa ma się poszerzać częściowo w prawą stronę do końca okna. Powiedzmy że chodzi o rozciąganie belki menu.
Zrobienie tego na całe okno to nie problem, bo wystarczy podłożyć tło na BODY i jest, ale jak sprawić żeby wypełniało się tylko w prawo od DIVa na środku?

Z tego co wyczytałem, to ustawienie powtarzania tła w poziomie od zadanego miejsca nie jest możliwe. Myślałem o upchnięciu po prawej jeszcze jednego DIVa, który by wypełniał pustą przestrzeń z prawej strony, ale szczerze mówiąc nie mam pojęcia jak to zrobić, żeby główny DIV był dalej na środku i czy w ogóle da się to tak zrobić.

Czy ktoś ma jakiś pomysł jak rozwiązać ten problem?

[by_ikar]

Kod

@media (min-width: 768px) {
    .container {
        background-image: url("../images/bg-above-768.png");
    }
}

Kod

@media (max-width: 767px) {
    .container {
        background-image: url("../images/bg-to-do-767.png");
    }
}

[alex19]

To jest jakaś opcja, ale nie do końca mi o to chodzi.
Główny kontener ma swoje tło i ono zostaje zawsze takie samo. Chodzi o bok na prawo od niego.

[by_ikar]

ja ten container podałem jako przykład. ja nie wiem co ty tam masz za kod, generalnie podałem ci przykład jak możesz użyć media, do stworzenia responsywnego layoutu. Bo w @media możesz wstawić co tylko chcesz, dzięki czemu na praktycznie każdej rozdzielczości możesz zmienić stronę całkowicie.

Ten post edytował by_ikar 4.06.2014, 17:03:31

[alex19]

Tak, ale to nie rozwiązuje problemu w żaden sposób.

Pytanie jest jak po prawej stronie, i tylko po prawej, podłożyć jakieś tło (inne niż po lewej), które wypełni resztę (o ile jest) wolnej przestrzeni, która wynika z centrowania elementu DIV na stronie.

[trueblue]

Ta prawa część ma mieć wysokość równą omawianemu DIVowi?

[alex19]

Może ale nie musi. Musi się zaczynać od samej góry i być co najmniej do 1/3 wysokości tego DIVa.

Może wstawię rysunek co chcę uzyskać, bo tak będzie łatwiej chyba....
(IMG:http://i58.tinypic.com/2hx94r4.jpg)

Na biało mamy DIVa. On ma ustawione jakieś tam tło na którym występuje sobie ten piękny pomarańczowy paseczek. Jak już wspomniałem DIV jest wyśrodkowany. Ja bym chciał, żeby ten pomarańczowy paseczek był dociągnięty zawsze do końca prawej strony, niezależnie od tego jak duże będzie okno przeglądarki, oczywiście bez zmiany położenia oraz szerokości naszego DIVa, który ma ją ustawioną na stałe.

[trueblue]

Może tak: http://jsfiddle.net/DJ7Wh/
A na kontenerze zawierającym DIV ustawić overflow-x:hidden; dla szerokości większych niż 600px, a dla mniejszych: .a div{display:none;}

Ten post edytował trueblue 4.06.2014, 18:55:42

[alex19]

Taką opcję już rozważałem, ale nie wiem czy zauważyłeś, że zrobienie czegoś takiego powoduje przewijanie okna w poziomie, ale chodzi tylko i wyłącznie o wypełnienie marginesu - jak będzie miał 0px, to nic nie będzie, a jak 100px to wypełniamy tylko to 100px.

Chcę uzyskać taki efekt jakbym dla body dał background, ale tylko na prawą stronę połowy całości (IMG:style_emoticons/default/wink.gif)

[trueblue]

A nie wiem czy zauważyłeś, że zaproponowałem overflow-x:hidden na kontenerze zawierającym tego diva (np. na body).

[alex19]

No to jest opcja.
Dla większych niż 600px? Jak to zapisać dla BODY?

[trueblue]

Zwykły css:

[HTML] pobierz, plaintext 
.a div{
 display:none;
}
[HTML] pobierz, plaintext 

Dla>600

[HTML] pobierz, plaintext 
@media screen and (min-width: 601px){
 body{
  overflow:hidden;
 }
 .a div{
  display:block;
 }
}
[HTML] pobierz, plaintext 

Obydwa oczywiście jednocześnie na stronie.

Ten post edytował trueblue 4.06.2014, 19:09:55

[alex19]

OK. Potem sprawdzę czy to zadziałało (IMG:style_emoticons/default/smile.gif)

Działa wyśmienicie!