Question

Is there a way to place an image with a non-rectangular area on a page? For instance, an image shaped like so:

   ____
  |    |
  |    |  Place links, etc. here
  |    |_________________________
  |                              |
  |______________________________|

I realize one could use absolute positioning and simply place the text over the whitespace in the image, but I’d rather avoid that solution.

Answer 1

Create your image rectangular as normal, with the dimensions set to encompass the area where you want your links/text/whatever to appear, and just make the link/text/whatever’s area transparent (or the same color as your background), then create a div like so:

  <div style="background: url('yourimage.png') no-repeat;  padding-left: 150px; padding-top: 50px;">Links and text go here</div>

(assuming your area for text/whatever is 150 pixels from the left, 50 pixels from the top of the image)