Need help with a quick image adjustment for an avatar border

ArnyVee

Well-known member
Hey guys and gals, I hope someone can help me on a quick request. I need to add a customized border around some avatars on a site that my daughter and I are building :D

We have large avatars (200 x 200) that members can select from and I added a small border on them. But, we thought it would look nicer (and classier) if we used a 'frame' image as the border.

So, since it is a United States History Forum, I figured that a gold-ish frame like this would work: http://www.webdesignerwall.com/demo/decorative-gallery/5b_gallery-gold-frame.html#

Can someone create the image so that I can use it as a border with a transparent 200x200 space in it to display the avatar?
 
test.webp


Something Like this ?
 
Yes sir :)

Since the avatars are mostly pictures of oil paintings, I wanted to give them a nice classy (museum-like) look. :D
 
Unless I'm misunderstanding you, instead of using that image posted above, you could achieve the same effect with just CSS and HTML. This isn't exact, but off the top of my head you could use something like this:

Code:
border: 8px ridge #DAA520;
 
You would need to seek permission to use that exact image Arny, or else if you have a photo that you have taken of a gold frame, or one that is copyright free, I am happy to reshape it for you into what you want.

:)
 
So, I just uploaded the frame pic and it looks perfect on Chrome, but missing something on IE. If you see the first attachment, you'll see that with 25px padding in the CSS it centered it perfectly. But the second attachment in IE, it seems to cut off a piece of the frame. Any suggestions on what I should do to ensure that it displays correctly on IE?
 

Attachments

  • Frame_Perfect.webp
    Frame_Perfect.webp
    82.4 KB · Views: 60
  • Frame_off_in_IE.webp
    Frame_off_in_IE.webp
    55.7 KB · Views: 53
So, I just uploaded the frame pic and it looks perfect on Chrome, but missing something on IE. If you see the first attachment, you'll see that with 25px padding in the CSS it centered it perfectly. But the second attachment in IE, it seems to cut off a piece of the frame. Any suggestions on what I should do to ensure that it displays correctly on IE?

It'll be because you've used padding, IE is a demanding beast, better to locate css for thread display avatar and use text-align:center (or margin: 0 auto)in the css
If you can link me to the page I can check it and tell you for sure. :)
 
Top Bottom