2

I have three images, and they are not square or rectangular in shape. They are just like face of anyone.

So, basically, my images are in the size 196x196 or anything like that, but complete square or rectangle with the face in the middle and transperant background in the rest of the portion.

Now, I want to remove the transperant background too and just keep the faces.

Don't know if this is possible and mind you, this isn't a programming question.

EDIT (from comments): How do I put a border around the shape of the image, not a rectangular one around the boundary, using CSS.

Lou Franco
  • 87,846
  • 14
  • 132
  • 192
kapeels
  • 1,692
  • 4
  • 30
  • 52
  • 2
    -1 for non programming question. All images (except some vector constructions) utilize quadrilateral bounding boxes. There is no mechanism that I have ever heard of for accomplishing this. Maybe the context would be helpful, what are you trying to do? – Gabriel May 08 '10 at 18:41
  • okay , i know this would happen, but let's not care about it and thanks for commenting ... what i am doing is ... i am slicing an image into three so that these images can be made clickable via HTML . I managed to set them as there in the original photo using CSS , but when I tried to add border color, it didn't do the work and just bordered the shapes i.e. square,rectangular , etc. so i want to remove the transperancy and make them so that the border is around the images and not the shapes ... i hope you understand – kapeels May 08 '10 at 18:45
  • I am not sure what you mean by remove the transparency. As far as image manipulation goes, you can set the alpha channel value of a layer in an image, or the image as a whole,but I am not sure what you mean by removing the transparency. And as Gabriel stated, images are rectangular whether you see that bounding rectangle or not. – Rob Goodwin May 08 '10 at 18:52
  • 1
    CSS borders will only go around rectangles. You can't have a non-rectangular image in any of the raster formats supported by browsers. – Max Shawabkeh May 08 '10 at 19:04
  • 2
    I edited the question to incorporate these comments. It's a programming question, I'd say, but there really isn't a solution in CSS. – Lou Franco May 08 '10 at 19:34
  • 1
    possible duplicate of [CSS Border on PNG image with transparent parts](http://stackoverflow.com/questions/12690444/css-border-on-png-image-with-transparent-parts) – web-tiki Feb 01 '15 at 13:56

1 Answers1

2

To answer your question about borders around the face.

  1. Load the image into Photoshop or gimp
  2. Make a second layer that is a copy
  3. On the bottom layer, resize the face so that it is the amount bigger that you want the border to be
  4. Fill the enlarged face with the border color using a low tolerance, so that the face is now a single color
  5. save to a .png and allow it to flatten.

There is no way to do this with CSS that I know of -- you could write a program to do this using ImageMagick or (dislaimer, I work for Atalasoft) DotImage, a .NET imaging SDK. In either, you'd copy the file, do the resize, the color, and then overlay the original onto it.

Lou Franco
  • 87,846
  • 14
  • 132
  • 192