[CSS] Background opdelen én 100% width

[Verwijderd]

Ik probeer nu een goede methode te vinden om het volgende voor elkaar te krijgen in CSS.

Stel dat je je website, dat een 100% width heeft, wilt opdelen in twee achtergronden, en je deelt het verticaal:

visueel wordt het dan zoiets:

<-- 100% 'links.gif' repeat | 'rechts.gif' repeat 100% -->

het linkerplaatje vult altijd de gehele linkerkant van de het scherm, en het rechterplaatjes de rechterkant.

Ik kan maar niet een methode vinden om dit (correct) te doen. Hij moet dus als het ware vanuit een denkbeeldige verticale middellijn danwel naar links toe opvullen en naar rechts toe opvullen met een achtergrond.

Het lukt met overigens prima om divs met vaste breedte vanuit het midden te berekenen en dat het tevens op de meeste recente browsers evengoed werkt. Maar ik kom in de knoei zodra ik daar div's met 100 width wil gebruiken.

[Yoozer]

Cascading Stylesheet:

body { 
background-image: 
url('bg.gif');
background-repeat: 
no-repeat;
background-position: 
 center; 
}

En dan een geschikte achtergrond gebruiken in de stijl van faux columns, denk ik. Dat is het meest elegant. Je zou 'm dan wel behoorlijk breed moeten maken.

[ Voor 16% gewijzigd door Yoozer op 01-12-2005 16:13 ]

[Verwijderd]

Dat is dus precies wat ik niet meer wilde gebruiken.

Het lukt op zich wel door bijvoorbeeld twee divs te specificeren voor background. Dan de eerste div laten op 100% width zetten, en dan de tweede ook 100% width maar dan laten beginnen op left: 50%.

Maar dan wordt alles berekend vanaf de linkerkant. En dat werkt niet zo goed als je met plaatjes werkt als achtergrond.

[Verwijderd]

Wat je zoekt, zit 'm in de eigenschap background-position in combinatie met de eigenschap background-repeat. Probeer eens een oplossing à la het volgende. Snel bekeken werkt het in IE, FF en OP.

code:

#bgleft {
  position: absolute;
  left: 0%;
  width: 50%;
  height: 100%;
  background-image: url(bgsq_left.gif);
  background-repeat: repeat;
  background-position: right; /* vul uit vanuit rechts */
}

#bgright {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 100%;
  background-image: url(bgsq_right.gif);
  background-repeat: repeat;
  background-position: left; /* vul uit vanuit links */
}

[Verwijderd]

Ahh! Heel slim met die background-position! Bedankt, de code is ook erg netjes zo!