[CSS] ALA's Faux Columns (repeat-y 50% x)

[Verwijderd]

Omdat de height:100% in CSS erg moeilijk blijkt te zijn voor Firefox (100% betekent dan 100% van het scherm en niet van de site zelf), heb ik de 'Faux Column techniek' gebruikt. Als de div dan niet meer verder naar beneden loopt, krijg je het (identieke) achtergrondplaatje y herhaald te zien, zodat het lijkt alsof de div wel verder gaat.

body { background: #ccc url(img/bg.jpg) repeat-y 50% 0; }

Achtergrondkleur: #ccc
Achtergrondimg: img/bg.jpg
Bg-herhaling: verticaal
Positie x: midden
Positie vanaf top: 0

Probleem is alleen dat ik boven de header en onder de footer 5px lege ruimte over wil hebben. Dit scriptje zorgt er dus voor dat ook deze 5px-ruimtes gevuld worden met het achtergrondplaatje.

Nu lijkt dat heel gemakkelijk op te lossen door die 0 te vervangen met 5, maar dat werkt dus niet. Dan is de hele achtergrondkleur- en plaatje opeens verdwenen...

Solution, anyone?

Weet iemand trouwens ook of het mogelijk is om twee achtergrondplaatjes te gebruiken? Als ik namelijk een achtergrondplaatje gebruik voor deze 'techniek', heb ik nog geen herhalend achtergrondplaatje die het hele beeld vult.

[ Voor 4% gewijzigd door Verwijderd op 24-07-2005 06:43 ]

[Verwijderd]

margin gebruiken?

[crisp]

je kan geen procent-waarden mixen met pixel-waarden. margin kan dan een uitkomst bieden, of een extra element waar je de background inzet

[Verwijderd]

Dit scriptje zorgt er dus voor dat ook deze 5px-ruimtes gevuld worden met het achtergrondplaatje.

Die 0 in de CSS is de margin van de bg al. Betekent dus 0 pixels vanaf top. Zou leuk zijn als het dan 5 pixels van de top gaat als je er 5 zet, maar zo werkt het dus niet...

Ik heb het nu opgelost door in die 5 pixels een div (100% breed) te planten, maar dat kan weer niet onder de footer, omdat die niet helemaal onderaan staat.

[crisp]

Verwijderd schreef op zondag 24 juli 2005 @ 22:44:
[...]

Die 0 in de CSS is de margin van de bg al. Betekent dus 0 pixels vanaf top. Zou leuk zijn als het dan 5 pixels van de top gaat als je er 5 zet, maar zo werkt het dus niet...

Ik heb het nu opgelost door in die 5 pixels een div (100% breed) te planten, maar dat kan weer niet onder de footer, omdat die niet helemaal onderaan staat.

Ja, 5px opgeven kan wel, maar dan moet de horizontale offset dus ook een pixelwaarde zijn

Overigens zou het volgens de specificatie wel moeten kunnen:

Combinations of keyword, length and percentage values are allowed

maar de praktijk wijst anders uit, helaas...*

* ik ga er hier van uit dat je ook daadwerkelijk een unit hebt opgegeven, dus '5px' ipv enkel '5' en dat je dus op een tekortkoming in de implementatie van background-position bent gestoten. Ik heb zelf geen test gerunt om te kijken welke browsers hier niet goed mee omgaan, maar weet uit ervaring dat er browsers zijn die een mix van percentages en absolute lengths niet aankunnen.

edit: toch maar even getest, maar zowel Firefox en IE gaan er toch goed mee om; de culprit zit 'm hierin:

All tiling covers the content, padding and border areas of a box.

En dat is dus je probleem; doe je het zonder tiling dan gaat het goed.

[ Voor 53% gewijzigd door crisp op 24-07-2005 23:36 ]

[Verwijderd]

Dank!

Ik zal even kijken of het lukt.