[web] achtergrond kleur-overloop

Hallo, ik ben bezig met een website. Ik zou graag als achtergrond een kleur overloop hebben. (zoals bij [url]www.macromedia.com[/url]) Heeft iemand enig idee omdit 'netjes' voor elkaar te krijgen? dus niet met enorme java-scripten ed. (ik word niet veel wijzer uit macromedia's broncode)

Je maakt een verloop in photoshop, je cropped dat verloop totdat hij 1px breed is. (en zo hoog als je het verloop wilt)

Je stelt dit in als achtergrond op je webpagina, zet de repeat in css op repeat-x, en zet dan ook het achtergrondkleur van de webpagina op de kleur helemaal onderaan je verloop.

En klaar is kees

maar als iemand dan de pagina groter maakt dan het gradient is het weer een stuk minder mooi...

Dat is niet correct hoor, als je een gradient van 800x600 (bijv) maakt, dan heb je dat idd, maar dat doe ik niet hier. Het zal hetzelfde blijven op eender welke resolutie. Vanwege de herhaling van het 1px brede prentje in de x-richting. In de Y-richting blijft alles hetzelfde, en blijf je dus het verloop zien.

[code:1:1406bcb953]

<html>

<style>
body{
background-image:(‘bg.gif’);
background-repeat:repeat-x;
background-color:red;
background-position:0px 0px;
}

</style>
<body>

</body>
</html>

[/code:1:1406bcb953]

Ik zou liever hebben dat het overloop altijd even groot is als de pagina. Dus als het venster 600px hoog is dat dan het overloop dat ook is, kan dat? (macromedia.com was een slecht voorbeeld)

als je mazzel hebt dan is er een heel erg ingewikkelde javascript voor, maar volgensmij kan het niet....

Geen garanties voor alle browsers, maar in IE 5 mac / Safari en Firefox werkt het:

[code:1:0c8d857c67]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Stretch</title>
<style type="text/css">
#container{
position:absolute;
z-index:2;
width:600px;
height:600px;
border:1px solid black;
top:30px;
left:50%;
margin-left:-300px;
background-color:#fff;
}
#background{
position:absolute;
z-index:1;
top:0;
bottom:0;
left:0;
right:0;
}
.stretch {
width:100%;
height:100%;
}
</style>

</head>
<body>
<div id="background"><img class="stretch" src="stretch.jpg"></div>
<div id="container">Hier de pagina content, deze komt boven op de div met id stretch…</div>
</body>
</html>
[/code:1:0c8d857c67]voorbeeld…

werkt erg leuk als je bijvoorbeeld met een mobiele telefoon surft ... not dus.

Verder wordt de gradient erg lelijk met het resizen: korrelig.

De techniek van kaydie werkt alleen in computer browser en spot met elke bruikbaarheidswet; de vraag is of je het wel zo moet willen. Ik zou de div toevoegen met zoiets als javascript, zodat browsers op mobiele aparaten (die vaak geen javascript aankunnen) niet een enorme afbeelding hoeven te downloaden.

Okey, bedankt allemaal, ik ga wat dingen proberen.

@tennapel Je hebt helemaal gelijk hoor, deze oplossing verdient echt niet de schoonheidsprijs en het is absoluut niet een methode die ik in de praktijk zou willen gebruiken. Ik wilde alleen maar even laten zien dat je in principe geen javascript nodig hebt om het gewenste effect te bereiken.

De techniek zou wel interressant worden als je bijvoorbeeld een afbeelding hebt in een layout die volledig meeschaalt met je browservenster. De image schaalt dan met de layout mee. Maar in dit geval zou ik toch eerder voor de methode van klaus gaan.