Hi,
is there an easy way to wrap text around an odd-shaped image?
Please refer to attached image. I need text to float around the green image but the image isn't perfectly symmetrical.
Any tips would be much appreciated.
I've tried googling but have had no luck. Maybe I'm not googling the right search words.
It must be possible without being overly complex using css??
No, because all images are really rectangles. The rest of that image is transparent. But the browser has no idea where the content is within the rectangular image.
I have some ideas:
1. Cut the image in two. But placement is tricky.
2. If the image is really solid green like that, you could make it with table components.
3. Put the text in a larger image containing both.
Thanks for your suggestions MidiMagic.
I tried option 1. Placement was very tricky and eventually I gave up on this option.
Unfortunately the image is not solid green.
I had thought about option 3 but prefer to avoid this option.
I ended up using the image as a background and putting each line of text into a span with left padding. Not exactly pretty html but it gets the job done whilst keeping it to 1 image without text in the image.
Don't ask me about alt and title text for the background image though :)
If anyone is interested I also just found the following url which talks about slicing up the image for curving and wrapping the text around it...
You ought to check that span method on other browsers and screen resolutions. The text positioning might change drastically.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.