How to wrap the text around an image using HTML and CSS?

Asma Mushtaq

Folding the text over a picture is very alluring for any sort of site. Presently the picture can be in various shapes or the fundamental square shape. We need to wrap that picture with the text. By utilizing HTML and CSS wrapping a picture with the text is conceivable and there are numerous ways of doing as such in light of the fact that the state of any picture isn’t consistent. Wrapping a text implies changing/folding text over a picture. In HTML, we can either adjust the picture on the right half of the text, or to the left, or to the middle. In CSS, other than these we can likewise embed the pictures all around or square shape, and so forth and can fold a text over it. You can likewise utilize CSS shape-outside Property relying upon the state of your picture.

Beneath models show the above approach:

Model 1: In this model, the picture is drifting right half of the screen and the text is wrapping the picture. In this model, we don’t need shape-outside property in light of the fact that the shape picture is usual(square).

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Wrapping an Image with the text
    </title>
     
    <style>
        body {
            margin: 20px;
            text-align: center;
        }
        h1 {
            color: green;
        }
        img {
            float: left; 
            margin: 5px;
        }
        p {
            text-align: justify;
            font-size: 25px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <b>
        A Computer Science
        Portal for Geeks
    </b>
     
    <div class="square">
        <div> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png"
                    alt="Longtail boat in Thailand"> 
        </div>
         
         
<p>
            How many times were you frustrated while looking
            out for a good collection of programming/algorithm
            /interview questions? What did you expect and what
            did you get? This portal has been created to
            provide well written, well thought and well
            explained solutions for selected questions.
            An IIT Roorkee alumnus and founder of GeeksforGeeks.
            He loves to solve programming problems in most
            efficient ways. Apart from GeeksforGeeks, he has
            worked with DE Shaw and Co. as a software developer 
            and JIIT Noida as an assistant professor. It is a
            good platform to learn programming. It is an
            educational website. Prepare for the Recruitment
            drive of product based companies like Microsoft,
            Amazon, Adobe etc with a free online placement
            preparation course.
        </p>
 
    </div>
</body>
 
</html>

Model 2: In this model, we will wrap diverse shape pictures and here we will utilize CSS shape-outside property for better review insight.

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Wrapping an Image with the text
    </title>
     
    <style>
        body {
            margin: 20px;
            text-align:center;
        }
        h1 {
            color: green;
        }
         
        /* This div design part is
            used as an Image */
        .round {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            text-align: center;
            font-size: 30px;
            float: left;
            font-weight: bold;
             
            /* Change the shape according
                to the image */
            shape-outside: circle();
            background-color: Green;
            color: white;
        }
         
        article{
            padding-top: 75px;
            display: inline-block;
        }
         
        p {
            text-align: justify;
            font-size: 22px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <b>
        A Computer Science Portal for Geeks
    </b>
 
    <div class="round">
        <article>GeeksforGeeks</article>
    </div>
     
     
<p>
        How many times were you frustrated while looking
        out for a good collection of programming/
        algorithm/ interview questions? What did you
        expect and what did you get? This portal has been
        created to provide well written, well thought and
        well explained solutions for selected questions.
        An IIT Roorkee alumnus and founder of
        GeeksforGeeks. He loves to solve programming
        problems in most efficient ways. Apart from
        GeeksforGeeks, he has worked with DE Shaw and
        Co. as a software developer and JIIT Noida as
        an assistant professor. It is a good platform
        to learn programming. It is an educational
        website. Prepare for the Recruitment drive of
        product    based companies like Microsoft, Amazon,
        Adobe etc with a free online placement
        preparation course.
    </p>
 
</body>
 
</html>
  • HTML is the underpinning of pages, is utilized for page advancement by organizing sites and web apps.You can gain HTML starting from the earliest stage by following this HTML Tutorial and HTML Examples.
  • CSS is the reinforcement of pages, is utilized for site page improvement by styling sites and web apps.You can gain CSS starting from the earliest stage by following this CSS Tutorial and CSS Examples site.

Using Internal CSS

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to wrap the text.

  • <!Doctype Html>
  • <Html>
  • <Head>
  • <Title>
  • Wrap a text around an image
  • </Title>
  • </Head>
  • <Body>
  • Hello User!….   <br>
  • Html Tutorial   <br>
  • This page helps us to understand how to wrap the text around an image in Html using CSS.
  • </Body>
  • </Html>

Step 2: Now, we have to type the CSS code for aligning the image. So, we have to type the <style> tag in the <head> tag just after the <title> tag.

  • <Head>
  • <Title>
  • Wraping text around image
  • </Title>
  • <style>
  • </style>
  • </head>

Step 3: And, then we have to define the various properties for wrapping the text around the image. So, we have to define a class.

  • .wrapingimage
  • {
  • float: left;
  • margin: 30px 12px 3px 4px;
  • border: 2px solid blue;
  • }

Step 4: Now, we have to use the defined class in the body tag as shown in the following screenshot.

  • <div class=“wrapingimage”>
  • <img src=
  • “https://www.javatpoint.com/images/logo/jtp_logo.png” height=“100” width=“100”
  • alt=“image”>
  • </div>

Step 5: And, at last we have to save the Html file and then run the file in the browser.

  • <!DOCTYPE html>
  • <Html>
  • <Head>
  • <Title>
  • Wraping text around image
  • </Title>
  • <style>
  • .wrapingimage
  • {
  • float: left;
  • margin: 30px 12px 3px 4px;
  • border: 2px solid blue;
  • }
  • </style>
  • </head>
  • <body>
  • Hellooo User!!!….
  • <div class=“wrapingimage”>
  • <img src=
  • “https://www.javatpoint.com/images/logo/jtp_logo.png” height=“100” width=“100”
  • alt=“image”>
  • </div>
  • <p>
  • If we want to wrap the text around an image in Html document using Internal CSS then we have to follow the steps which are given below. Using these steps we can easily wrap a text.
  • Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to wrap the text.
  • Step 2: Now, we have to type the CSS code for aligning the image. So, we have to type the style tag in the head tag just after the title tag.
  • Step 3: And, then we have to define the various properties for wrapping the text around the image. So, we have to define a class.
  • </p>
  • </Body>
  • </Html>

Also Read: How to Install Chrome in Ubuntu?

Leave a Reply

Your email address will not be published. Required fields are marked *