[CSS] background stretchen

[Rhapsody]

Hallo,


ik zit weer eens in dubio....

Voor een website moet ik een balk hebben met kleuroverloop. Zo dus:


Nu is het al snel zo dat je je dat vastpint op 1 resolutie, in dit geval 800x600 (Omdat dat nog steeds gebruikt wordt...)
Background-stretching wordt helaas pas ondersteund vanaf css3 en is nu dus nog geen optie.
Is er een mogelijke workarround hiervoor?

Ik weet dat Internet Explorer allerlei filtertjes heeft, zo ook een gradient, maar die is natuurlijk weer IE-only, ook geen oplossing, want dan krijg je net zoiets als waneer je met FF www.microsoft.com bezoekt.

Via google, (of got) ben ik tot nog toe op niets bruikbaars gekomen. Dus als iemand mij een schop in de goede richting wilt geven, heel graag.

[Vinnienerd]

Enige mogelijk lijkt mij een <img> die je laat scalen

[samo]

Je kan ook een gradient gebruiken en deze via

code:

  background-position : top right

aan een kant zetten. Met natuurlijk aan de linker kant de achtergrondkleur van de linkerkant van het plaatje...

[Tjeemp]

ik deed dan meestal gewoon het plaatje aan 1 kant en de gradient eindigt toch met een kleur, en de rest opvullen met die kleur, mssn niet altijd een erg charmante manier, maar werkt wel

[Gomez12]

Je kan ook nog met een vaag javascriptje kijken wat huidige resolutie van de browser is en hem dan doorsturen naar een bepaalde pagina met een bepaalde background image ( dus dmv gd een image laten maken en cachen wat aan deze waarde voldoet ) let op dit is foutgevoelig vanwege resizen van een pagina en dergelijke ( en javascriptjes hiervoor vind ik zowieso ranzig net zoals een browsercheck, maar ja je moet toch wat )

[Rhapsody]

Gomez12 schreef op dinsdag 07 juni 2005 @ 19:48:
Je kan ook nog met een vaag javascriptje kijken wat huidige resolutie van de browser is en hem dan doorsturen naar een bepaalde pagina met een bepaalde background image ( dus dmv gd een image laten maken en cachen wat aan deze waarde voldoet ) let op dit is foutgevoelig vanwege resizen van een pagina en dergelijke ( en javascriptjes hiervoor vind ik zowieso ranzig net zoals een browsercheck, maar ja je moet toch wat )

Ik wilde eigenlijk niet gaan klooien met een resolutiecheck of een browsercheck, want dan is mijns inziens het einde zoek.

Ik vrees dat er geen andere oplossing is dan de oplossing die timovdz en samo-arne aangeven....:(

[LoeiOrdinair]

Wat het mooist is is om de background in het midden uit te lijnen en deze dan 1600 breed te maken.

[André]

LoeiOrdinair schreef op dinsdag 07 juni 2005 @ 19:54:
Wat het mooist is is om de background in het midden uit te lijnen en deze dan 1600 breed te maken.

Dat is niet het mooiste, want op smalle schermen zie je dan maar een klein stukje gradient

En idd, de oplossing van timovdz en samo-arne zijn IMHO de betere

[ Voor 11% gewijzigd door André op 07-06-2005 20:04 ]

[Dark Blue]

Ik heb hier een stukje code...

PHP:

<script language="JavaScript">
function makeIm() {
NS4=(document.layers);
IE4=(document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = "indexbg.jpg";
if (NS4) {
origWidth = innerWidth;
origHeight = innerHeight;}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();}
if (NS4) onresize = reDo;
if (IE4) onresize = reDoIE;
function reDoIE(){
imBG.width = document.body.clientWidth;
imBG.height = document.body.clientHeight;}
winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;
imStr = "<div id=elBGim"
+ " style='position:absolute;left:0;top:0;z-index:-1'>"
+ "<img name='imBG' border='0' src="+imSRC;
if (scaleWidth) imStr += " width="+winWid;
if (scaleHeight) imStr += " height="+winHgt;
imStr += "></div>";
document.write(imStr);}
makeIm();
</script>

Het is wel redelijk 'dirty' maar het werkt.

Ah, wacht, ik zie dat je een balk nodig hebt. Nouja, ik denk dat het in dit bovenstaande script wel mogelijk is om het uitrekken in hoogte eruit te slopen en die op een vaste positie te fixen.

* Dark Blue krijgt zojuist een meesterlijke brainwave voor een achtergrond zoals die in EPIC PINBALL: Enigma te maken...

[ Voor 22% gewijzigd door Dark Blue op 07-06-2005 20:49 ]

[Rhapsody]

Bedankt voor je code, maar zoals je al zegt is het niet ariel-schoon Ik denk dat ik dus maar afga op de oplossing van timovdz en samo-arne


* Rhapsody adviseert Dark-Blue dat vooral NIET te gaan maken

[ Voor 19% gewijzigd door Rhapsody op 07-06-2005 20:52 ]

[André]

* André adviseert iedereen dat script helemaal niet te gebruiken, het is ranzig en zwaar outdated

[Rhapsody]

André schreef op dinsdag 07 juni 2005 @ 21:06:
* André adviseert iedereen dat script helemaal niet te gebruiken, het is ranzig en zwaar outdated

GoT-papa has spoken!!

Ennieweej: bedankt allemaal, ik kan weer ff puzzelen

[r0bert]

Ongeveer hetzelfde als het scriptje eigenlijk, niet echt netste manier denk ik, maar het zag er nog redelijk uit vond ik

code:

<div style="width: 480px; height: 200px; position: relative;">
    [img]"http://www.developersonly.nl/temp/voorbeeldje.png"[/img]
    
    <div style="position: absolute; left; top: 0; left: 0; z-index: 2;">tekst enzo<br />je weet wel..<br /> loos</div>

</div>