User Card Background Size, how do I trick the algorithm?

[MichelleBasey (Michelle C. Basey)]

Preferences -> Profile -> User Card Background

the helpful note says “Background images will be centered and have a default width of 590px”.

1. what is the height?

It seems to be random.

2. What size tricks it into loading the image as I created it?

My original image had been a square, so duh, of course that’s going to get cut off.

A colleagues User Card was displaying at 590x390, so I tried that size first.

• 590x390, surely that will work! nope
• 590x290? nope again
• 590x190? nadda

ok maybe it’s just that there’s black space on the L/R edges that’s confusing the magic, I’ll load an image with color that spans all the way to all the edges and set it to 590 wide

• nope again!
• 590 high? LOL nope, not gonna happen, cuts it off in the exact same way

I have tried several different shaped images (and several diff. images) and I can’t get any of them to play nice with the algorithm. Clearly normal humans just load an image and it’s all good. Or maybe they don’t care how it’s being cut off because it’s a user card for cripes sake, that is muted behind the important words, why am I arguing with technology?

I searched in here and can’t find it, please please please tell me:

3. What’s the magic number?
   is it a size? a ratio? must I sacrifice a latte to the Tea Gods first?

thank you for your assistance in my ultra~trivial pursuit of the pretty

[codinghorror (Jeff Atwood)]

@MichelleBasey

thank you for your assistance in my ultra~trivial pursuit of the pretty

I fully support this trivial activity can we advise here @Johani

[Johani (Joe)]

Long live the pretty!

An explanation how card backgrounds work

@MichelleBasey

1. what is the height?

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:

1. the desktop width is actually 580px and not 590px
2. 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.

[MichelleBasey (Michelle C. Basey)]

@Johani, you rock!
Thank you so much for a detailed nerd-girls dream answer!!