Why can't I just have the image image,png on my webpage and in the CSS use shape-outside: url(image.png) to give the shape? Is there something I am not getting?

I'm not sure what you're trying to do but it sounds like it would better to use an SVG image.

Hi @Jack. It also does not work with an svg. I cannot use circle as the image is a more irregular shape. So I wanted to use the image itself in my CSS to be the shape the text should float around.

Does the image have a transparent background?

Have you tried different settings:

https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside

have you looked also at css tricks https://css-tricks.com/almanac/properties/s/shape-outside/ 

also forking css tricks example and using own image seems to work 

don't know much about this cos never used it but remember it has to float (i think) and the for images you need to specify it in the shape-outside path so  in the css so it uses the alpha channel to flow around

https://codepen.io/dp/pen/WNQJoGp?editors=1100

@Jack, @fisicx and @davep you guys are awesome. Thank you so much.

I am offline for a couple of days but I will come back and try these solutions - and if it is allowed / OK post a CodePen of my attempts, if it does not work? I will at least provide an update.

@fisicx if you are meaning shape-image-threshold, yeah I even tried that. Nothing worked. It is annoying me. I am determined to get it work.

I will post an update later next week. Many thanks again!