: I want to REMOVE the background, not just make it transparent I want to remove the background of an irregularly shaped image altogether, not just make it transparent. The image's box is overlapping

@Karen819

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.

Vote Up Vote Down

@Nickens508

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.

Vote Up Vote Down