This short intro will not get you started   with shape-   outside (URL).   For that you need   to read Razvan Caliman’s 23-Page Primer on the shape‑outside: (URL) property here. I’ve included the entire article as a .PDF in your .ZIP file! My small contribution is to put you in the way of tools you will need to wrap text around an image, and provide you with the code for this page (below) so you can see it and begin to play around with it using your own hosting provider!

Briefly, the CSS shape-outside property allows you to structure text flow around a user-defined shape that has TRANSPARENCY: .PNGs and .SVGs work perfectly; .JPGs and .GIFs will not work with shape-outside.

If your image is a .JPG or a .GIF I recommend converting it into a .PNG. While you can use any of dozens of free online graphics converters you will inevitably need to use a GRAPHICS EDITOR to erase the portion of your graphic that the text needs to be transparent for your content.
I highly recommend handycloset’s FREE (and easy!) Android App “BACKGROUND ERASER”.

There are five types of shape-outside properties: INSET, CIRCLE, ELLIPSE, POLYGON, and URL (an image available on the internet, supplied as a path). The advantage to using URL is that the browser can draw your coordinates for you based upon the image’s transparency. The downside? Your page can only be tested and viewed if your image is hosted online.

We’ll call our silhouette “Lucy.” Lucy is a transparent .PNG whose image has a URL path on my Free NEKOWEB.ORG account which includes 500mb of storage. That’s a severely limited amount of storage but I can use Google Photos for all my other images (more about that later). I’m lucky in that Lucy’s typing path will be extracted automatically by the browser instead of my having to plot her coordinates manually as with INSET, CIRCLE, ELLIPSE, and POLYGON! The goal is to move the text around the solid portion of Lucy’s hat, face, neck & chest — allowing a 1.25rem (20px) margin between the text and the image. I accomplished this with a generous use of &nbsp;s and <br>s as you can see in my code. Don’t be afraid to use them where needed.

These are the primary building blocks — and some important caveats — for shape-outside so begin with the tools I’ve suggested you try and use Razvan’s easy-to-follow PDF for Getting Started with shape-outside.

IMPORTANT! shape-outside will not work on free servers such as Google Photos or Flickr even if you have converted the image to a clickable link as I describe in my About page. Both the image and its HTML file must live in the same folder on a paid hosting provider’s server you control -or- a free server such as NEKOWEB.ORG, NEOCITIES.ORG or the free dynamic host INFINITYFREE.COM (for advanced users). There may be others; the key is to have them in the same folder on a domain you control. Reserve your limited storage space for your shape-outside pages which have to be stored with their HTML (in my case, NEKOWEB), and use Google Photos for all your other images. Read more in my About page.

And one final word about shape-outside . . . This is an inexact science to put it mildly: It’s not at all uncommon at times to spend hours and hours tweaking both your image and the HTML file it belongs to, to seat the content to your satisfaction. Use &nbsp;s and <br>s where needed in tight spots to fine tune the appear-ance. The end result will be stunning and your patience will pay off in (at times) jaw-dropping visuals!