Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
24th April 2009

CSS tip: Image text wrap effect

Use CSS and div tags to perfectly position text to create an image text wrap effect

Use CSS and div tags to perfectly position text to create an image text wrap effect.

CSS tip: Image text wrap effect

GETTING TEXT TO fit the contours of an image is not a simple one-element action.

Div tags, by their very nature, use straight edges, so in order to create the text wrap illusion, a number of well-positioned and styled tags need to be employed. First, create a container tag (Insert>Layout Objects>Div Tag>New CSS Style>Advanced, name the tag, ie ‘#container’, Box and add width and height) that is the same size as the image, and place the image as the background image. Now insert another div tag, but this time insert ‘after start of tag’ just created, click New CSS Style, name the tag, ie ‘#topline’ and press OK. Now select a font, font size and colour, then head to Box, add in a width and height before making sure that Float is set to Left. Finally, add in some padding. Repeat the process and create additional div tags to accommodate the remaining text. Each tag needs to be placed after the end of the previous tag. This will help create the wrap effect. Add as many div tags as needed to create the wrap effect. The individual tags should be a similar length, or less, to the container tag, so when floated left they do not sit side by side but on top of one another. Finally, width, height and font size will need to be adjusted to fit, as well as padding added to the right to ensure that text does not overlay any parts of the image.

CSS tip: Image text wrap effect

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Dzhavat Ushev

      Thanks for the tutorial.
      It is really nice and tricky but it would`ve been better insted of explaining the CSS code to show it. :) :)
      Or maybe put them both.
      Anyway, thanks again.

    • Lin

      I agree, SHOW the css code.

      Much easier to follow.

    • http://Twitter.com/lambday Lambday

      what is your favorite position ?

    • http://www.kodamotiv.com Tomas B

      Too many div’s in that code. And what happened to h1, h2 tags? You could use only one div with background image and then use h1 instead of div#topline, h2 instead of div#leadline. You can also style p tag and get rid of div#body text.

      In that way your code would be much more semantic as it is now.

    • http://www.vu-tran.com Vu Tran

      I agree with Tomas B. Using h1, and and h2 would be more ideal for title, and subtitle. Using the div’s on all the text works, but is not ideal because it makes it seem like all those text div’s are of the same importance, while obviously the h1, and h2 tags would separate itself from the body text.

    • CodeCollective

      Yeah please update – no point leaving out CSS code on a Tip/Tut like this right?