I want to remove the background of an irregularly shaped image altogether, not just make it transparent. The image’s box is overlapping with other stuff and getting in the way. There’s got to be a way to remove the extra space.
I cropped my image as closely as I could in photoshop and made the remaining background transparent. My image is wide at the top than the bottom (picture a vertical candy cane) so that leaves a lot of empty space that overlaps with other objects on the page.
There’s got to be a way to remove the extra space.
Short answer: you can’t.
Long answer: you can’t, but you don’t need to. No one else even tries.
(Qualifier: I do web development for a living and teach it at the University level)
Everything on a web page is a rectangle. Always has been ever since the Mosaic 1.0 browser back in 1993. Transparency exists to provide the illusion of non-rectangular shapes and it’s used pretty much everywhere.
So what you do with your candycane is put it in the background. Either as a background-image property where you can push it around quite easily with background-position, or use position: absolute on the <img> tag and go from there.
If you want your text to flow around an irregular object, the usual way is a stack of empty <div> objects and creative use of float. It’s a lot of time to get it right, I’ve got most designers trained not to do it.
clip-path has a lot of promise, but until Microsoft gets up to speed we either accept that MSIE users will see something else or we do something else.