51

With the new top bar, my profile picture displays very ugly:

  enter image description here

It has a transparent background, which is transformed into white. This used to be somewhat okay, but now the picture is used in two different contexts: white in some pages, grey user boxes, black top bar… and it keeps its white background all the time. In the top bar, it's especially ugly.

We're in 2013, transparent PNG, like Unicode, has been around a long time. Can we have transparency please?

Improve this question
7
  • 4
    That's actually a task for imgur who handles the thumbnails creation, but I totally agree.
    – Shadow Wizard Is Sad And Angry
    Dec 5, 2013 at 9:18
  • 3
    @ShaWizDowArd but that's SE team who can post a feature request to imgur, so asking here was the only thing F'x could do :)
    – Mołot
    Dec 5, 2013 at 9:41
  • 5
    It works for gravatar images with transparency, but it is rather annoying to be unable to use the SE-internal avatars with transparency.
    – Mad Scientist
    Dec 5, 2013 at 10:07
  • @MadScientist wonder if animation is working too in gravatar? ;)
    – Shadow Wizard Is Sad And Angry
    Dec 5, 2013 at 11:03
  • I had the same problem but when I created a new account on a different Stack Exchange the transparency was generated. Is this possibly some kind of caching issue?
    – Rory
    Dec 7, 2013 at 19:49
  • Interestingly, the accepted answer on this thread indicates that the issue was fixed back in March - yet, as I posted in that thread, it's still present.
    – Aleks G
    Dec 18, 2013 at 8:42
  • I should point out that the icon avatar in that little grey box on this question doesn't appear to have a transparent background either.
    – user213963
    Jan 18, 2014 at 20:34

3 Answers 3

Reset to default
5

It wouldn't be hard to fix this for the top bar only with a user script; in fact, the following code will do it:

$('.topbar img.avatar-me[src^="https://i.stack.imgur.com/"]').attr(
    'src', function (i,v) { return v.replace(/\?.*$/, '') }
);

This is slightly wasteful of bandwidth, since it uses your full-size avatar image, but it shouldn't make that much difference as it will only affect you, and your browser will cache the image anyway.

However, I'm not sure how much point there would be in doing this, since the change would only be visible to you, and only in the top bar. What we really need is a proper fix to Profile picture cannot have transparent background, and that's something that Imgur needs to do — it's not something SE can fix on their own (other than by switching to another image host).

Edit: I went ahead and included the fix above into version 1.4 of the Stack Overflow Unofficial Patch, a collection of client-side CSS and JavaScript fixes packaged as a GreaseMonkey-style user script. If you're using a compatible browser (Firefox, Chrome, Opera, possibly Safari and others, but unfortunately not IE or most mobile browsers), feel free give it a try!

Improve this answer
3

This appears to be an issue with the imgur upload option as some commenters are suggesting - if you use the Gravatar option it appears to be working as expected:

Nav Bar:
Nav Bar, image on black

Profile Page (activity):
Profile Page, image on white

New Profile (profile):
Profile Page, image on Grey and White

Check that the gravatar you're using has a transparent background (mine was a .png if that helps).

Improve this answer
4
  • Interesting. This definetely does not work for avatars uploaded to Stack Exchange (i.e., Imgur) directly. (At least a few days ago.)
    – Wrzlprmft
    Dec 1, 2014 at 10:08
  • Yes - you've got a point there - I've never tried to use the "Upload image" option, always going for the Gravatar option (mainly because it wasn't an option when I started, and I use it elsewhere)...
    – Zhaph - Ben Duguid
    Dec 1, 2014 at 10:10
  • Note that it takes a few minutes for the Gravatar option to appear in 'Change Picture' at Stack Exchange sites, if you've only just associated your Stack Exchange email address with Gravatar. (I use different email addresses for different sites.) For those who aren't familiar with it, Gravatar is a service that allows you to upload an image to Gravatar.com and associate it with an email address, which other sites, like Stack Exchange, then use for your profile photo/avatar/userpic.
    – Michael Scheper
    Jan 4, 2015 at 22:25
  • still an issue for those who want different images for different stack exchanges without setting up a multitude of email addresses for gravatars
    – Hashbrown
    Jul 30, 2016 at 5:02
-3

This is not a good idea sometimes. What if you have a mostly black avatar, like mine? enter image description here

Improve this answer
6
  • 8
    Then you would add a white background to the image yourself?
    – 3ventic
    Mar 23, 2014 at 15:03
  • @3ventic But the image background should still be transparent in other places, like on other SE sites where the background color is not white.
    – Eliza Wilson
    Mar 23, 2014 at 15:09
  • What Stack Exchange site has a background color for posts that is not white?
    – Shadow Wizard Is Sad And Angry
    Mar 23, 2014 at 15:24
  • 4
    @ShadowWizard: The Meta of Science Fiction & Fantasy. The main site’s background is also slightly grey. However, I think that the problem described here is the lesser evil than having no transparent avatars at all.
    – Wrzlprmft
    Nov 28, 2014 at 11:14
  • @Wrzlprmft Your right. It's annoying for a very small amount of users, and it's not common enough to justify making an option for non-transparent avatars.
    – Eliza Wilson
    Nov 29, 2014 at 22:50
  • Check my avatar for example, there is a brownish white glow in the background surrounding the image which makes it work on black backgrounds yet is virtually invisible on white backgrounds.
    – David Mulder
    Dec 1, 2014 at 21:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .