[CSS] background image uitlijnen

[bvp]

hey hey,

Zoals de titel al beschrijft heb ik een probleempje met het uitlijnen van een background-image in css. Ik heb al verschillende dingen geprobeerd en ik weet nu niet meer of ik wel in de juiste hoek aan het zoeken ben.

Ik heb op mijn pagina een <div> uitgelijnd over de gehele breedte met links daarin een logo.
Nu wil ik hierin ook een background image plaatsen die een gradient bevat van donker naar licht.

Als ik deze gewoon inlaadt met:
BACKGROUND-IMAGE: url(../img/image.png);

Op bovenstaande manier krijg je dus gewoon klein stukje donker naar licht dat zich steeds herhaalt.
Ik wil deze image juist uitlijnen dat ie donker begint en afhankelijk van de breedte van de pagina lichter wordt.
Ik heb al geprobeerd met repeat-y etc. maar krijg het niet voor elkaar.

Weet iemand of dit wel mogelijk is met bijv de optie stretch ofzo mee te geven of moet ik het compleet ergens anders zoeken?

Alvast bedankt!

[Willem]

Wat dacht je van repeat-x

_{En width/height 100% etc}

[bvp]

willem169 schreef op vrijdag 02 september 2005 @ 13:59:
Wat dacht je van repeat-x

_{En width/height 100% etc}

Zoals ik hierboven aangaf heb ik met repeat-y de image laten herhalen over de gehele hoogte van de <div>.
Dit werkt ook gewoon alleen wil ik nu deze image op de manier tonen alleen dan "uitgerekt" over de gehele breedte van de div.

Bestaat er dan iets van een background-width optie ofzo?

[Rowanov]

Dit zijn all css properties die je kan gebruiken. Als je bijvoorbeeld wil dat je div stretcht over de hele breedte en je hebt een horizontale gradient van wit naar zwart, dan kan je de achtergrond kleur op wit zetten en een achtergrond plaatje positioneren aan de rechterkant van de div en hem vervolgens over de Y-as laten herhalen.

[bvp]

Ok bedankt beiden.

Had echter echt iets verwacht dat er wel zoiets zou zijn als image-stretch ofzo.
Zal ik dus toch mijn image breder moeten gaan maken en uitlijnen of iets anders moeten gaan zoeken.

Javascript wordt ik niet echt vrolijk van maar is er wel een mogelijkheid om hiermee een background-image te stretchen naar de grootte van de <div> ?

iets als:
window.document.<div-name>.image.width ofzo.
Maar kan dit ook met een in een style-sheet gedefinieerde image?

[Rowanov]

Background image en image zijn wel twee verschillende dingen, een background image kan je al die dingen meegeven als op de pagina die ik je hierboven gaf beschreven staan. Een img kan je gewoon stylen met:

Cascading Stylesheet:

img {
   width: 100%;
}

[bvp]

Rowanov schreef op vrijdag 02 september 2005 @ 15:07:
Background image en image zijn wel twee verschillende dingen, een background image kan je al die dingen meegeven als op de pagina die ik je hierboven gaf beschreven staan. Een img kan je gewoon stylen met:

Cascading Stylesheet:

img {
   width: 100%;
}

Ja idd, maar dat is juist het probleem, ik gebruik in deze div al een image, namelijk het logo.
Nou zou ik op de achtergrond van de image wel een gradient kunnen gebruiken en naast het logo een andere image kunnen plaatsen met het verdere verloop van de gradient maar dat blijf je altijd zien.
Maar een andere achtergrond gaan gebruiken dan maar bij mijn logo-div

[sjaakaq]

Ehm ja kan ook dat logo een gif maken, of desnoods PNG met vieze IE-hack?

Als je het logo/de site/een voorbeeld post kunnen we alvast heel wat verder komen

[ Voor 41% gewijzigd door sjaakaq op 02-09-2005 15:38 ]

[Verwijderd]

Waarom vul je de rest van de pagina niet op met de rechterkleur?

Cascading Stylesheet:

body {
    background:url(gradient.jpg) repeat-y #[rechterkleur uit gradient];
}

[bvp]

Verwijderd schreef op vrijdag 02 september 2005 @ 15:52:
Waarom vul je de rest van de pagina niet op met de rechterkleur?

Cascading Stylesheet:

body {
    background:url(gradient.jpg) repeat-y #[rechterkleur uit gradient];
}

Tja idd thnx dat is denk ik toch wel de meest nette oplossing.
Stretchen was helaas altijd nog beter geweest, maar dat is dus niet mogelijk.

Het probleem van deze oplossing is namelijk dat je dan bij bijv. 800*600 een keurig nette gradient ziet ( als je gradient-image 600 width maakt ) en bij een veel grotere resolutie ( bijv. 1280*1024 ) de opvulling heel erg opvalt?

leokennis schreef op vrijdag 02 september 2005 @ 15:36:
Ehm ja kan ook dat logo een gif maken, of desnoods PNG met vieze IE-hack?

hmmm, snap ik niet hoe bedoel je precies?

[ Voor 16% gewijzigd door bvp op 02-09-2005 16:02 ]

[sjaakaq]

Nou, de gradiënt als image en je logo als semi-transparante image eroverheen.