transparante background

[Verwijderd]

Ik heb al hier en daar gezocht maar kon helaas niet duidelijk terugvinden hoe het zit. Mocht ik iets over het hoofd hebben gezien, sorry alvast.

Ik heb in mijn ontwerp de volgende opzet. Een background image voor de body en een background image voor een container div (gecentreerd op de pagina). Nu heb ik in de background van de container aan de beide uiteinden een transparant stukje. Een soort gradient effect moet dat worden, die van wat donkerder naar transparant loopt. Het is dus de bedoeling dat de background van de body te zien is achter de background van de container zegmaar.

Nu heb ik al wat gespeeld met dither in photoshop e.d. om ervoor te zorgen dat de background van de container transparant is, maar dan krijg ik allemaal 'ruispixels' en krijg dat niet fatsoenlijk weg.

Ik kwam ergens tegen dat dat probleem misschien komt doordat ik met een drop shadow effect heb gewerkt. Kan dat kloppen? Zo ja, wat is het juiste alternatief?

Alvast bedankt.

[TeeDee]

PNG met een alphachannel is hoogstwaarschijnlijk de beste oplossing. Punt is wel dat je nog een Javascript fix toe moet passen om dat ook in IE werkend te krijgen.

[Verwijderd]

M.a.w. jij denkt dat het gewoon niet mogelijk is met een gif in Photoshop?

[disjfa]

Gif kan geen halve kleuren aan waardoor je vast zit aan hele pixels. Zeg maar geen alpha op de pixel naukeurig zoals png 24 dat wel normaal doet.

Als jij het dus met hele pixels kan oplossen dan moet je dat zo maken Maar over het algemeen niet dus.

[Verwijderd]

Ok thanks, ik heb het nu zo opgelost m.b.v. een voorbeeldje wat ik iets heb aangepast:

Cascading Stylesheet:

#container {
    background: url('images/container_bg.png') repeat-y left top !important;
    background: none;
    /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/container_bg.png');
}

Werkt, en zonder javascript.

[Verwijderd]

Hm dat is dus helemaal geen optie. Helemaal niet over nagedacht dat dat een ActiveX geval is en je toestemming moet geven voor de inhoud. Sterker nog, toen ik het gisteren testte hoefde dat ook helemaal niet. Zie het nu voor het eerst.

[Pendaco]

Verwijderd schreef op dinsdag 12 september 2006 @ 20:39:
Hm dat is dus helemaal geen optie. Helemaal niet over nagedacht dat dat een ActiveX geval is en je toestemming moet geven voor de inhoud. Sterker nog, toen ik het gisteren testte hoefde dat ook helemaal niet. Zie het nu voor het eerst.

Waar test je dat dan, wanneer je t lokaal test wil IE idd nog wel zo'n melding geven, zet je m vervolgens online dan zal de melding verdwijnen (dacht ik ).

[Verwijderd]

Pendaco schreef op dinsdag 12 september 2006 @ 22:23:
[...]


Waar test je dat dan, wanneer je t lokaal test wil IE idd nog wel zo'n melding geven, zet je m vervolgens online dan zal de melding verdwijnen (dacht ik ).

Ja verdomd daar zeg je me wat. Ik test 't momenteel lokaal (al was dat gisteren ook zo hoor). Ik zal het morgen nog eens online testen. Thanks
Ik laat 't weten.

[Tjeemp]

ik heb de manier van zo'n soort achtergrond maken beetje afgekeken bij geenstijl.nl

die hebben gewoon een 2000px brede achtergrond image, die alleen verticaal herhaald wordt en via css in het midden gehouden wordt...

[Verwijderd]

Pendaco heeft gelijk (gelukkig) .
Had het ook kunnen weten, maarja, soms ben je zo lang met dingen bezig dat je kleine dingetjes vergeet.

Maar het werkt dus inderdaad wel gewoon online zonder gekke meldingen. Joehoe

[Verwijderd]

Helaas werkte de code die ik eerder gebruikte toch niet helemaal. Hij werkte ok toen ik er nog geen border in had verwerkt. Later verwerkte ik de border in het plaatje en toen bleek ineens dat hij dat deel van het plaatje in IE heel vreemd renderde. Kreeg ipv een dashed border een vage streep te zien in IE.

timovdz schreef op woensdag 13 september 2006 @ 01:25:
ik heb de manier van zo'n soort achtergrond maken beetje afgekeken bij geenstijl.nl

die hebben gewoon een 2000px brede achtergrond image, die alleen verticaal herhaald wordt en via css in het midden gehouden wordt...

Toen toch maar eens die manier geprobeerd en dat lijkt iig allemaal perfect te werken. Wilde ik toch nog maar even vermelden.