[CSS] PNG Fix voor background

[Verwijderd]

Beste Tweakers,

Ik zit weer met een probleempje.

Momenteel ben ik een site aan het omzetten naar html en loop ik tegen het volgende probleem op:
Misschien dat het met behulp van deze image wat handiger is uit te leggen:



Ik heb dus een bg met alleen die blauwe diagonale streepjes. Dan heb ik een container div met als background het wit + die schaduw als transparant png. Nu werkt het in FF en in IE7 prima. Alleen oudere IE browsers laat hij gewoon niet die shadow zien.

Heb gezocht op internet naar verschillende IE fixxes voor deze bug. Maar deze werkt niet, heb ook al gelezen dat het komt omdat die fixxes niet werken om repeatable backgrounds?

Iemand die mij uit de brand kan helpen?

[danslo]

http://www.google.nl/sear...&btnG=Google+zoeken&meta=

http://www.daltonlp.com/d...i?item_type=1&item_id=217


10 seconde in google Werkt prima voor mij op repeatable bg's.

[Verwijderd]

Geloof me ik heb ook al genoeg gezocht naar die fixxes maar niks werkt

[danslo]

Oh btw.. dit is het scriptje dat het voor mij deed, niet het bovenstaande...:
http://homepage.ntlworld.com/bobosola/

[Verwijderd]

grappig die had ik ook al geprobeerd maar werkte ook niet.

[Savantas]

Helaas werkt voor zover ik weet geen van de IE-png-fix-scripts met background-images.

[Verwijderd]

Zijn er geen andere oplossingen?

[danslo]

Kan je niet gewoon in photoshop een image fixen die er dus zo uit ziet en dat als rand background-image instellen? Dus die background pakken, in photoshop je gradient er over, dat opslaan, en dan dat in een extra divje aan de zijkant als bg-image instellen. Dat zou moeten werken

[Verwijderd]

cls schreef op maandag 18 september 2006 @ 16:35:
Kan je niet gewoon in photoshop een image fixen die er dus zo uit ziet en dat als rand background-image instellen? Dus die background pakken, in photoshop je gradient er over, dat opslaan, en dan dat in een extra divje aan de zijkant als bg-image instellen. Dat zou moeten werken

snap je niet helemaal, maar in principe kan ik geen image gebruiken met ook die diag. streepjes en shadow. omdat als de browser groter of kleiner wordt sluiten die lijntjes niet goed aan!

[danslo]

Dat bedoelde ik dus.. Er moet een manier zijn om die lijntjes netjes aan te laten sluiten

[Verwijderd]

Bedenkt die eens een of andere l33t berekening ofzo

[Blaise]

Kan je niet een (al dan niet schematisch) plaatje maken hoe je layout eruit moet komen te zien? Het moet namelijk vrij eenvoudig mogelijk zijn zonder PNG's.

[Rowanov]

Als je die achtergrond met die lijntjes centreert met css is er niets aan de hand en zal het gewoon aansluiten. Dat kost misschien even wat proberen en hooguit een conditional comment om het geheel een pixel naar links/rechts te schuiven in IE.

Ik heb dit zelf meermalen gebruikt en ben nooit problemen tegenkomen.

[PinQ]

Ik snap precies welk probleem je hebt Kvdzanden.

Ik ben er ook al een paar keer tegenaan gelopen en heb ook al google afgestruind (tevergeefs) dus ik ben erg benieuwd naar een oplossing!

* PinQ doet bookmark

[Verwijderd]

Rowanov schreef op maandag 18 september 2006 @ 23:37:
Als je die achtergrond met die lijntjes centreert met css is er niets aan de hand en zal het gewoon aansluiten. Dat kost misschien even wat proberen en hooguit een conditional comment om het geheel een pixel naar links/rechts te schuiven in IE.

Ik heb dit zelf meermalen gebruikt en ben nooit problemen tegenkomen.

ja maar als je browser zelf groter of kleiner maakt kan je het nooit zo maken dat die altijd aansluit! dat is juist het probleem

[disjfa]

Verwijderd schreef op dinsdag 19 september 2006 @ 01:02:
[...]
ja maar als je browser zelf groter of kleiner maakt kan je het nooit zo maken dat die altijd aansluit! dat is juist het probleem

Dan zorg je of voor een vaste breedte pagina of voor een extra container waarin je de linkerkant zet en een ander waarin je de rechterkant zet. Dan houd je de plaatjes op vaste afstand van de rand en heb je weer geen probleem.

[MIster X]

Met IE6 kun je een Alpha-filter maken in je CSS. Als je met een conditional comment je .png vervangt door een zwarte .gif, krijg je in IE precies hetzelfde effect als met de .png in FF.

code:

<!--[if IE]>
<style type="text/css">
#transparent {  
    background-image:url(black.gif);
    filter: Alpha(Opacity=0, FinishOpacity=100, Style=1);
}
</style>
<![endif]-->

Bij mij wordt dit nu zowel in FF als in IE6 goed weergegeven: testje.

[ Voor 13% gewijzigd door MIster X op 19-09-2006 02:03 ]

[Verwijderd]

JavaScript:

function fnFixPng() {

    var obj = document.getElementById("elementID");

    var bg  = obj.currentStyle.backgroundImage;

    var src = bg.substring(5,bg.length-2);

    obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";

    obj.style.backgroundImage = "none";

}

Dit stukje code werkt perfect, bij elementID vul je het ID van het element met de png achtergrond in

Nog ff wat anders geprobeerd, dit werkte eerst niet bij mij maar nu ineens wel

Cascading Stylesheet:

    background: url("../images/achtergrond.png") no-repeat !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/achtergrond.png", sizingMethod='scale');
    min-height: 300px;
    height: auto !important;
    height: 300px;

Je moet het element wel een hoogte geven anders werken links etc niet

[ Voor 32% gewijzigd door Verwijderd op 19-09-2006 09:46 ]

[Verwijderd]

Bedankt! Ik ga dit vandaag testen, laat het weten of het gelukt is!

[Genoil]

Wat alleen een beetje vervelend is, is dat als je een png-fix op een background doet van een element waarbinnen links zitten (zoals in TS' geval), de links vaak niet meer werken na toepassing van de fix. Ik zeg vaak, omdat er combinaties van hoogtes en breedtes van afbeeldingen schijnen te zijn waarbij het allemaal wel weer werkt.

Zelf pas ik daarom meestal de 'botte bijl' methode toe. Ik maak een centrerende body-background van 2048px breed. Werkt gegarandeerd.

[Verwijderd]

lol zo hebben we het idd nu gefixt!

img van 3000px breed en die centreren werkt prima maarja helaas had dat andere wat leuker geweest

[Niakmo]

Verwijderd schreef op dinsdag 19 september 2006 @ 15:55:
lol zo hebben we het idd nu gefixt!

img van 3000px breed en die centreren werkt prima maarja helaas had dat andere wat leuker geweest

het probleem wat je nu hebt is dat als je het centreerd en mensen gaan het scherm resizen waardoor je oneven breedte resoluties krijgt, gaan verschillende browsers het verschillend afronden waardoor het nog niet werkt.

Voor het weergeven van png's als background met transparantie gebruikt ik altijd het volgende js bestand, en heeft bij mij nog altijd gewerkt.

http://allinthehead.com/retro/69/