Home/ Questions/Q 6163085
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T21:45:55+00:00

On an HTML page, you can make text flow around images with the CSS

  • 0

On an HTML page, you can make text flow around images with the CSS property “float”. But this will only consider the image’s rectangle, not transparent regions in the image. I now have an image that has large areas of full transparency, like for example a circular logo, and would like the text to flow around the circle contour of that logo, not the bounding rectangle. At least on the text-facing side of the image.

I know that CSS is probably not suitable for that task. But is there some workaround, like hidden divs or something that can achieve the same (or a similar) effect? Has somebody already seen such a thing?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have written a PHP function for that now. It takes the PNG image and generates the <div> elements to make the text flow around another form than the image’s rectangle. You can find the code here:

    https://unclassified.software/source/shaped-image-flow

    Update 2020/2021:

    Now there is a CSS property for that: shape-outside. It can be given an image with transparency that will determine the outside shape to let the text flow around. If the visible image is already a PNG, the same image can be used for this CSS property. Additional margin can be added with shape-margin. Both are supported by anything except IE.

    Example:

    <img src="img/shape.png" style="shape-outside: url(img/shape.png); shape-margin: 1.5em;">
    • 0