Long live the pretty! 
An explanation how card backgrounds work
Let’s start with a card with no background on desktop
The card width is 580px and its height is ~154px
Now let’s add a background to this card via the User Card Background preference
The image I’ll be using is this one
I will make the card content semi-transparent in some of my examples below so we can focus on the background.
Once we add the background, we end up with this
Notice how the height of the card increased by 80px even though the content is still the same? Well that happens because we add some margins to the content of cards with backgrounds to create this effect
Now, let’s take this a step further and add a bio to the profile.
That results in the card height increasing by an additional ~ 50px.
The point I’m trying to make is that there is no perfect height since the card will expand to fit the content.
This is why we use CSS to add the background instead of adding the image as an actual element. This allows us to make the background responsive. The way it’s displayed depends on the height of the card. Here’s an exaggerated example
Again, this is an exaggerated example and user-cards are never allowed to be that big.
If you noticed, for all the examples above, the card width was always 580px. This is intentional. However, that’s only the case on desktop. Mobile is a different case. The width of the card is based on the the size of the screen.
So while for one device it might be ~390px wide
It’s also possible that it can be a different width on a device with a different screen width - 304px in the example below.
So what should I upload?
As we found out above, the user card can be either rectangular or square depending on the device you view it on. Uploading a square image is not really an issue - again because we use CSS to set its size.
If I use this image as the background
it will work, but will be “zoomed in” to fit inside the card.
So some parts of the image will never be displayed. This is not a big issue with the image above, but if the square image has looks more like this (where there is a single object of focus)
You would then get something like this
or this
depending on the content of the card.
Based on that, I would recommend a rectangular image but I don’t think we can recommend any specific size, instead we can recommend a minimum size.
Changes we can make
Since the copy we have there is outdated for two reasons:
- the desktop width is actually 580px and not 590px
- we’ve recently added mobile user cards, so that’s not always true anymore
I suggest we update the copy from this
Background images will be centered and have a default width of 590px.
to something along the lines of this
Recommended minimum size 600x300
the rest of the information in the current help text is not necessary.