1

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.

  • Hello Amanda, welcome to GDSE and thanks for your question. What do you mean remove the background? You're wanting to remove part of a layer so a different layer shows underneath? If you want to know more about the site, please see the help center or ping one of us in chat once your reputation is sufficient (20). Keep contributing and enjoy the site! – Zach Saucier Apr 3 '15 at 0:07
  • 3
    All digital pixel-based images everywhere are rectangular. You can not create a non rectangular pixel-based image. The only option for a pixel-based image is to make some areas transparent. – Scott Apr 3 '15 at 1:06
  • This question is also exceptionally unclear. Image box overlapping where? What are you using for the images? How are you using images? – Scott Apr 3 '15 at 1:19
  • Yes it is, I'm sorry. I'm building a website. 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. – Amanda Apr 3 '15 at 2:17
  • Well, as I posted, All pixel images must be rectangular. There's no way around that. Using Cascading Style Sheets (CSS) for positioning in a web page may help. – Scott Apr 3 '15 at 3:34
2

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.

  • You could serve MSIE up with an alternative to clip-path, like an absolutely positioned div with overflow set to none. But that's a lot of hassle for something that's not really necessary in the first place... – PieBie Apr 3 '15 at 10:23
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.