Preferences → Profile → User Card Background the helpful note says “Background images will be centered and have a default width of 590px”. what is the height? It seems to be random. 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? :upside_down_face: I searched in here and can’t find it, please please please tell me: 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

Long live the pretty! :fist: An explanation how card backgrounds work [תמונה] MichelleBasey: what is the height? Let’s start with a card with no background on desktop [card1] 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 [3601cfb12be0540821260e532c039c6783620e89_2_690x388] 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 [card2] 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 [card3] Now, let’s take this a step further and add a bio to the profile. [card4] 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 [card5] It’s also possible that it can be a different width on a device with a different screen width - 304px in the example below. [card6] 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 [ivy-1395534_1280] it will work, but will be “zoomed in” to fit inside the card. [card7] 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) [animal-3032194_1280] You would then get something like this [card8] or this [card9] 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.

[תמונה] MichelleBasey: thank you for your assistance in my ultra~trivial pursuit of the pretty I fully support this trivial activity :muscle: can we advise here @Johani

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

תמיכה

MichelleBasey (Michelle C. Basey) 25 באפריל,‏ 2019,‏ 11:00pm 6

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

נושא		תגובות	צפיות
User Card Preview in Preferences Feature	1	572	6 באוגוסט,‏ 2022
Profile Background + User Card Background Uploader Feature	4	2623	31 ביולי,‏ 2015
User card badge size is too big for images Feature	2	2145	2 באפריל,‏ 2015
Opening usercards changes the zoom UX completed , tablet , user-card	5	518	11 ביולי,‏ 2024
Usercard Redesign Experiment Feature completed , user-card	127	9800	18 ביולי,‏ 2024

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

נושאים קשורים