Wrapping the text around an image is quite attractive for any kind of website. Now the image can be in different shapes or the basic square shape. We have to wrap that image with the text. By using HTML and CSS wrapping an image with the text is possible and there are many ways to do so because the shape of any image is not constant. Wrapping a text means adjusting/wrapping text around an image. In HTML, we can either align the image on the right side of the text, or to the left, or to the center. In CSS, besides these we can also insert the images in a circle or rectangle, etc. and can wrap a text around it. You can also use CSS shape-outside Property depending on the shape of your image.
Below examples illustrate the above approach:
Example 1: In this example, the image is floating right side of the screen and the text is wrapping the image. In this example, we don’t require shape-outside property because the shape image is usual(square).
Example 2: In this example, we will wrap different shape images and here we will use CSS shape-outside property for the better viewing experience.
- How to place text on image using HTML and CSS?
- How to Add Image in Text Background using HTML and CSS ?
- How to wrap text around circular carousel in Bootstrap 4 ?
- HTML | wrap Attribute
- HTML | DOM Textarea wrap Property
- HTML | <textarea> wrap Attribute
- Text Animation with changing the color of the text using HTML & CSS
- How to Vertically Align Text Next to an Image using CSS ?
- How to give text or an image transparent background using CSS?
- How to place text in an image at any desired position ?
- Convert an image into grayscale image using HTML/CSS
- Image Replacement in Bootstrap using text-hide Class
- HTML | Text Formatting
- HTML | <input type="text">
- How to define preformatted text using HTML ?
- HTML | DOM Anchor Text Property
- HTML | DOM Input Text name Property
- HTML | body text Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.