Hoi rob1970,
Helemaal bovenaan
Je hebt het img nu in een <p> in een tabelcel <td> staan.
Nu hebben paragrafen / alinea's <p> uit zichzelf een padding (opvulling boven/onder de regel) en/of margin (afstand boven/onder tot de volgende regel). Deze margin en/of padding wordt er door de browsers automatisch in gezet. Wil je dat niet, dan moet je in je css-styles opnemen:
Code:
p {
margin: 0;
padding: 0;
}
Daarmee komt het bovenrandje van de afbeelding pal tegen de bovenrand van het browservenster.
- Andere manier is, om de <p>...</p> die om het <img ...> heen zit, helemaal weg te halen; dan komt het img ook meteen bovenaan.
Het witte randje
Waarschijnlijk heb je de afbeelding gemaakt op een witte achtergrond, toen de gouden rand eromheen gezet, en toen het wit transparant gemaakt.
Daarmee is transparant geworden wat 100% zuiver wit is. Maar tussen het pure wit en de goudkleur zitten nog een aantal tussentinten. Die verlopen van bijna-wit tot bijna-goud, en maken de cirkel op het oog perfect:
(alleen het omstreepte gebiedje is zuiver wit)
Als je jouw afbeelding op een witte achtergrond bekijkt (
zoals hier), dan is er niets aan de hand.
Maar als je er, zoals op de webpagina, een donkergroene achtergrond achter zet, dan gebeurt er dit:
(de verlooptinten zitten nog steeds tussen wit en goud)
Daarmee lijkt er een wit randje bijgekomen te zijn, maar het zat gewoon al in de afbeelding!
De oplossing is, om in Photoshop al de donkergroene achtergrond te nemen, en daaroverheen de gouden rand te zetten. Dan gaan de verlooptinten van donkergroen naar goud:
(het gebiedje zuiver groen is hetzelfde als hierboven)
Maak je nu het zuiver groen transparant, dan blijven de groene verlooptinten gehandhaafd, en komt de figuur op de groene achtergrond zonder randje.
Er is ook nog een alternatief...
- Een .gif bestand kan alleen maar 100% transparant maken.
- Een .png bestand kan wel semi-transparante tussentinten hebben. Dat is het alternatief: helemaal geen groene background in Photoshop, maar transparante background, daaroverheen de gouden rand (die dan verloopt van puur goud naar steeds transparanter), en dan opslaan als transparante png.
- Voordeel: deze werkt met alle background-kleuren zonder randje, test: bliksekaters.nl/tests/test-aboutfoto1-nw.png.htm.
- Nadeel: de png-versie is bijna 200kB groot en maakt de pagina traag, terwijl de gif-versie van 93kB half zo groot is (en toch al aan de grote kant).
Met vriendelijke groet,
CSShunter
