Image over an image, double backgrounds, background size, rounded images

[AshleyByrom]

Okay well I have a little idea but I am stuck when I try applying it.

 

I have a user system and users can upload display pictures (of 150x150 pixels). in header.php (which is 'required' in all pages) I have that picture displayed but, scale down to 50x50. (maybe this is a bad idea, i should create two images but I'm on limited data storage as for now)

 

What i would like to do is make a 50x50 image of a transparent rectangle that has white, rounded edges (inverted) so when placed over the image it looks like the image is rounded. Here is my problem. HOW?

 

I cannot find a way to do it. I have had a few ideas but I don't know how to do them.

 

Idea 1)

Place the image as a background in a table cell and then place the rounded image in the cell. But how do I resize background images?

 

Idea 2)

Place a DIV containing the rounded image over the table cell which has the image in. This seems possible but would the positioning break up sometimes?

 

Idea 3)

Set two backgrounds for one table cell - I don't think this is possible

 

Idea 4)

Look for a way to just round the corners of an image

 

Any help would be highly appreciated!!!

 

Thanks

[littlevisuals]

Here is my lazy reply 

http://www.sitepoint.com/examples/rounded_images/

 

 

[AshleyByrom]

Thanks, the only problem is it doesnt tell me how to do it.. it's just teasing me. I'm trying to copy the source but it doesn't look good...

[haku]

Do you have photoshop? If so, you can do it like this:

 

1) Open the image

2) Select the 'rounded rectangle tool'

3) Draw your rectangle (adjust the value for 'radius' in the properties panel to change the size of the rounded corners)

4) Right click the rectangle you just drew and choose 'make selection'

5) delete the layer that you just drew (the rectangle)

6) press ctrl + i (to invert the selection)

7) If the original image is in the background layer (you can tell by looking at your layers panel), then hold alt, and double click the background layer in the layers panel. This will change the name of the layer to 'layer 0'. If the image is in it's own layer, then turn off the visibility of the background layer (by clicking the eye on the left of the layer).

Press delete. This should round the corners of your image

9) Save your image.