De CSS
De CSS:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
body {
background-position:top center;
background-repeat:repeat-x;
background-color:#FFFF00;
background-image:url(wall.php?tc=ff8800&bc=ffff00);
}
background-position:top center;
background-repeat:repeat-x;
background-color:#FFFF00;
background-image:url(wall.php?tc=ff8800&bc=ffff00);
}
Deze CSS plaatst de background-image bovenaan in het midden van de pagina door 'background-position:top center'.
Door 'background-repeat:repeat-x;' herhaalt de afbeelding zich oneindig, maar alleen in de breedte. Zo kan je de gradient 1px breed maken en toch een volledige full-screen gradient hebben.
Om te voorkomen dat de gradient bij scrollen naar beneden zich herhaalt staat verticaal herhalen uit. De gradient zal slechts 1x getoont worden. Daaronder komt een vaste kleur.
Die kleur staat in 'background-color'. De background-color stel je als de ONDERSTE pixel van de gradient. Als jij een gradient van blauw (boven) en groen (onder) hebt moet je dus de background-color instellen als precies dezelfde kleur groen als in de gradient.
Zoals in het CSS voorbeeld te zien is heb ik een php script als achtergrond afbeelding.
Op de volgende pagina kan je de bron van die afbeelding/php script zien. Dit is natuurlijk optioneel: je kan met photoshop ook een afbeelding maken.
De hoogte van de afbeelding kan je zelf bepalen. Indien je een full-screen gradient wilt kan je iets rond de 1000 pixels hoog nemen. 1px breed is genoeg, want de gradient wordt oneindig vaak naast elkaar gezet door de CSS.
« vorige pagina | volgende pagina »