[CSS] Background-image oprekken met height

[bas.kb]

Goeiiiemiddag,

Ik heb een gifje gemaakt die een thermometer voor moet stellen, en ik heb het binnenste gedeelte (waar normaal gesproken het kwik zit) transparant gemaakt. Als ik dit plaatje weergeef heeft de binnenkant van de thermometer de kleur van de achtergrond van de pagina waar deze wordt weergegeven.

Ik bepaal met een stylesheet de achtergrond, namelijk zo:

code:

<style>
div
    {
    background-image:url(images/balk.jpg);  
    background-position:10px 100px;
    }

</style>

<div>
<IMG SRC="images/donatiemeter.gif" />
</div>

Nou had ik gedacht dat als ik bij de css de div ook een height zou meegeven, dat het plaatje (balk.jpg) netjes uitgerekt zou worden. Op deze manier kan ik door de hoogte te veranderen... de waarde van de thermometer bepalen. Nou ondersteund het background-image element geen height of width, en ook met background position kan ik niets uitrekken.

Ik heb al gezocht naar een javascriptje zodat ik dit kan omzeilen, maar nog niets gevonden. Weet iemand hoe ik dit op deze manier wel kan doen? Of eventueel een goede manier om een (uitrekbaar) plaatje achter mijn (transparante) thermometer te plakken?

// edit
Ik zou altijd nog met gd2 een plaatje kunnen genereren dat de juiste hoogte heeft, maar dat leek me een beetje omslachtig. Heeft iemand een beter idee?

[ Voor 6% gewijzigd door bas.kb op 18-12-2006 14:50 ]

[André]

Kun je niet een gewoon plaatje gebruiken dat je oprekt met CSS?

[MarkvE]

Je kunt inderdaad het beste een plaatje daarvoor gebruiken die je van hoogte wijzigt of een div/span element waar je een background inzet met een repeating background.

[GH45T]

Als je perse met height en width wilt werken dan zou je een extra div op de achtergrond kunnen overwegen.

[ Voor 3% gewijzigd door GH45T op 18-12-2006 15:58 ]

[bas.kb]

Okey bedankt.

Ik heb op zo opgelost. Werkt prima

code:

    <DIV id="">
    <DIV style="position:absolute; bottom: -300px; left:200px; background-image:url(images/balk.jpg); background-repeat:repeat; background-position: top left; width:100px; height:{$donatie_meter}px;"></DIV>
    <DIV style="position:absolute; bottom: -310px; left:200px;"><IMG SRC="images/meter.gif" ></DIV>
    </DIV>