-p-yww
Last Updated: February 25, 2016
·
1.462K
· captn3m0

Creating the perfect coderwall background image

I recently contacted Coderwall support about me not being able to upload a new background image on my account. While the issue was resolved quickly, I also tried to craft the perfectly visible background image for coderwall. I did ask coderwall about the perfect image size, and Mike (@just3ws) replied to me with a size of 760x333 pixels based on the profile div dimensions. However, I soon realized that this was not enough, as coderwall css resizes the image to 840px wide:

Imgur

So, I took on the task of perfecting the pixels in Inkscape to create a template image for coderwall. I fired up my Inkscape (after realizing that Pinta can't give me the pixel perfection I was looking for). So, without any further delay, here's the template image that you've been looking for:

You can download the original svg/png from my Github repository.

This is how the image appears if used as background image (blur removed for clarity):

Imgur.

Color Guide: White is invisible region, yellow is the visible background, and blue is your avatar image.

If you liked this, you might want to follow me on GItHub or Twitter.

1 Response
Add your response

15319

What a nice article. :) I was just basing the dimensions off the visible rectangle, really cool that you dug in deeper and found out how much you can actually do with the banner.

over 1 year ago ·