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.
As Scott already pointed out: every image everywhere in the world is rectangular. You cant 'remove' parts of this rectangle.
That said, CSS gives you a few options to go one step further.
option 1: border-radius
You could use css's border-radius to delete some of the excess space at the bottom. Border-radius is used for rounded corners, but you can pass a value for each corner. So you can crop of more at the bottom than at the top.
option 2: clip-path
CSS3 also features a fully-fledged clipping property. It's a bit difficult to wrap your head around, but once you get it, it can be a very powerful feature. You could use SVG masking to 'delete' parts of your image. For now, browser support is OK at best, so use with caution if you want to support IE and older browsers.
PS: If you didn't know the wonderful CSS-tricks website before, get to know and love it now if you're serious about going into web design.
