Witam,

chciałem zastosować nieregularną grafikę na stronie responsywnej, jednocześnie optymalizując rozmiar grafiki żeby ie tworzyć jej na szerokość 2200px.

[HTML] pobierz, plaintext 
 
CSS
 
.foot	        {width:100%; height:229px; background-image:url(szeroka grafika); background-position:center; margin-top:-30px;}
 
.foot2	{width:960px; height:229px; background-image:url(grafika 960px); background-repeat:no-repeat; margin-left:300px;}
 
HTML
 
<div class="foot">
<div class="foot2">
 
zawartość
 
</div>
</div>
 
[HTML] pobierz, plaintext 

GRAFIKA

Wygląda to tak jak na obrazku. Grafika jaśniejsza to tło jednego DIVa. Grafika ciemniejsza to tło DIVa pod stopkę.


Zależy mi żeby wyrzucić tło z foot w takiej formie i wstawić tam pasek na szerokość 1px po lewej stronie i po prawej stronie (dwie grafiki).
Coś w stylu

[HTML] pobierz, plaintext 
<div style="width:100%; float right; background-image:url(szerokość 1px);></div>
<div style="width:960px; float right; background-image:url(szerokość 960px);>
 
ZAWARTOŚĆ
 
</div>
<div style="width:960px; clear:both background-image:url(szerokość 1px);></div>
[HTML] pobierz, plaintext 

Tyle że to oczywiście nie działa

Tło 1px jest takie samo z lewej i prawej?
Jeśli tak, to daj div na 100% z tym tłem, a w nim div 960px wycentrowany z tłem 960px.

NIe było by problemu jakby było takie samo, ale po prawej jest wyższa i ma inny kolor, a po lewej niższa.

div na 100% z tłem 1px lewym
a w nim:
div na 50% pozycjonowanie absolutne do prawej, z tłem 1px prawym
div na 960px wycentrowany pozycjonowanie relatywne z tłem 960px.

Działa, dzięki wielkie. Nigdy się nie łapie w układaniu divów obok siebie