[css] background gradient over de gehele pagina

[mtlife]

Voorbeeld hier: http://profarm.org/test/

Zoals je ziet op het voorbeeld heb ik links en rechts 2 gradients aan de randen van de pagina. Hoe krijg ik deze gradients op een lengte van 100% van de pagina lengte? En voor mensen met een hoge resolutie, maak het browser schermpje heel klein en verassend genoeg als je naar beneden scrollt zie je dat de gradients niet meerekken. Hoe krijg ik dit voor elkaar? Heb al tijdje gegoogled hierop, niets kunnen vinden.
Ik heb zelf al geprobeerd allerlei scroll instellingen te veranderen, de gradients in een div wrapper met 100% gezet of met height auto, niets werkt.
Ik heb geen idee meer, iemand die mij een duwtje in de goede richting kan helpen of zelfs een oplossing weet?

[RobIII]

Euh, zowel in IE7, FF3, Opera en Chrome geen probleem hier Kun je wat specifieker zijn? Ik zie dat paars gewoon doorlopen tot onderaan de pagina? Oh, wacht zie het nu
Sorry, moet even de kleine instoppen en dan House kijken; ik kom straks nog wel effe kijken.

[ Voor 75% gewijzigd door RobIII op 30-10-2008 20:54 ]

[Roytoch]

Je moet het schermpje heeel klein maken. Bij mij in ff3 gaat hij dan inderdaad gek doen. In ie7 dan weer niet, hier verschijnt opeens een groot geel vlak dat ik nog niet eerder had gezien...

Bovenstaande is sneller met editten dan ik met reageren!

Eerste wat ik zie al is dat je meerdere divs gebruikt, 1 voor de achtergronden met zindex 1 en daaroverheen weer je content met zindex2. Is er voor jou geen mogelijkheid om de achtergrond anders te doen? Ik neem aan dat het probleem is dat je de achtergrond wil centreren? Want volgens mij ben je van het probleem af als je de pagina een achtergrond geeft in plaats van meerdere layers met divs.

Misschien volledig ten overvloede omdat het niet je bedoeling is maar backgrounds centreren in een pagina kan bijvoorbeeld zo:

Cascading Stylesheet:

BODY { 
background: url("images/bg.jpg") top center 
}   /*  50%   0% */

[ Voor 73% gewijzigd door Roytoch op 30-10-2008 21:00 ]

[mtlife]

roy.ahuis schreef op donderdag 30 oktober 2008 @ 20:56:
Is er voor jou geen mogelijkheid om de achtergrond anders te doen? Ik neem aan dat het probleem is dat je de achtergrond wil centreren? Want volgens mij ben je van het probleem af als je de pagina een achtergrond geeft in plaats van meerdere layers met divs.

Misschien volledig ten overvloede omdat het niet je bedoeling is maar backgrounds centreren in een pagina kan bijvoorbeeld zo:

Cascading Stylesheet:

BODY { 
background: url("images/bg.jpg") top center 
}   /*  50%   0% */

Dat zou kunnen, dat zou betekenen dat ik de 1 background image ervan maak. Probleem is alleen, ik wil de gradient uiterst links en uiterst rechts laten plaatsvinden. Dus dan zou ik met 1 plaatje hem moeten uitrekken wat uiteraard de kwaliteit niet bevorderd. Als tijdelijke oplossing kan het natuurlijk, maar het is niet wat ik wil.

[Verwijderd]

Als het jou lukt om de breedte van een achtergrond aan te passen binnen de huidige CSS-standaard; be my guest maar ik heb daar nog nooit van gehoord.

Met een extra container zou het wel moeten lukken. Probleem is echter dat je deze nu een height van 100% geeft. Dit betekent dat ie de hoogte van het viewport aanneemt, wat betekent dat de achtergrond ophoudt bij de rand van het scherm en je dat gaat zien als je naar beneden scrollt.
Als je de hoogte van deze container weghaalt en eventueel een wrapper onderin je container plaatst neemt deze automatisch aan van je site.

Dit heeft wel als gevolg dat bij weinig content de background niet over het hele scherm loopt. Hiervoor zou je een min-height: 100%; mee kunnen geven, zodat de container in ieder geval altijd minimaal even hoog als het viewport van de browser is.

[Roytoch]

Verwijderd schreef op vrijdag 31 oktober 2008 @ 08:18:
Hiervoor zou je een min-height: 100%; mee kunnen geven, zodat de container in ieder geval altijd minimaal even hoog als het viewport van de browser is.

Let dan wel even op dat min-height niet in alle browsers goed werkt. Oplossingen zijn er natuurlijk wel. De vraag is altijd een beetje: hoeveel tijd ben je bereid te besteden aan het 'oprekken' van de afbeeldingen. Hoewel het voor jou dan misschien perfect mag overkomen, heb je best kans dat de gemiddelde bezoeker hier totaal niet op let. Dan doe je én heel veel werk, én werk je met meerdere div lagen, iets wat volgens mij sowiezo altijd tricky is.

[Scheeve]

Zet je de linker background als body background en plaats een container div met een min-height van 100% en width 100%. Geef vervolgens die container de rechter gradient als achtergrond en klaar. Dit kan zonder dat je de w3c standaarden overtreedt, maar ik wil eerst even zien of je zelf tot een oplossing kan komen.