Nilesh.org Notes on technology and everything else

img.flowing { 

  float: left; 

  clear: left; 

  margin: 0 2em 0 0;

}

Note that this method isn’t more simpler
than Eric’s method. In fact, initially, you’ll need lot of patience
to align the image correctly. Given the effort required, there
are many advantages of using this method. First, if you feel that
you need finer control on the wrapping of text, it is as easy
as find and replace in the code. You don’t need to re-slice the
image with different heights. Second, partial loading of an image
wont look as bad as in the sliced version, if you use progressive/interlaced
images. Unfortunately, as with the earlier method, browser support
is limited to 6.x and greater versions.

To explain in plain words, we create a
<div> with the background being the image to be wrapped.
Then using multiple blank 1×1 gifs/pngs, we wrap the text around
the image in background. This gives us flexibility in deciding
the heights and widths of the transparent images we are using.
You can vary the heights and widths for finer wrapping of text.
In what I have done above, I have used constant heights (20px),
and so a bit of unevenness can be seen on the wrapping edge.

Now down to the exact code. I used the
following id definition for the div:

#toycycle{

  background-image: url(toycycle.jpg);

  background-repeat: no-repeat

  background-attachment: scroll;

}

or in short,

#toycycle{

  background: url(toycycle.jpg) no-repeat scroll ;

}

This tells the browser to put toycycle.jpg as the background
image for the div `toycycle`. The scroll value fixes
the image relative to the div position and allows it to move alongwith
the div. Also the no-repeat value prevents tiling of
the image.

And the image class is

img.flowing { 

  float: left; 

  clear: left; 

  margin: 0 2em 0 0;

}

The float:left attribute allows the image to stick to
left side of the div and the clear:left attribute clears
up any text on the left side of the image. You can increase or
decrease the space between images and text by changing the margin
attribute. Now, you use the id and class in
this way:

<div id="toycycle">
<img src="0.gif" alt="" class="flowing" 

     border="0" width="105" height="20" /> 

<img src="0.gif" alt="" class="flowing" 

     border="0" width="110" height="20" /> 
<img src="0.gif" alt="" class="flowing" 

     border="0" width="115" height="20" /> 
<img src="0.gif" alt="" class="flowing" 

     border="0" width="110" height="20" /> 
<img src="0.gif" alt="" class="flowing" 

     border="0" width="98"  height="20" />

…

<img src="0.gif" alt="" class="flowing" 

     border="0" width="220" height="20" />

<p>Note that this method isn’t more simpler than 

Eric’s method. In fact, initially, you’ll need lot

 of patience to align the image correctly. Given

…</p>

Place the transparent images before the text and place them only
as much required. For example, assuming the background image has
a height of 400pixels, if you take each image 20pixels high, you’ll
need about 20 transparent images stacked up to cover up the whole
image. Adjust the width of each image accordingly. You can experiment
with this to achieve smooth text flow over the image. See a live
example on my About
page.

I haven’t
tested this on browsers other than Mozilla 1.0+, IE6.0 and Opera
7.01. It would be nice if someone tells how this looks on other
versions of browsers. Though I think, there wouldn’t be a problem with 5.x browsers, given their support for background attributes and ids