[personal profile] glymr posting in [community profile] style_system
Hello!  I would like to hold a contest to have people create a header image for this community: [community profile] detroitbecomehuman.  However, I can't seem to find any resources to tell people what a standard header image size should be, ie "no wider than x number of pixels", "no taller than x number of pixels", or anything about whether they will degrade gracefully on mobile, etc.  Does anyone have any tips or links that might help?

Thank you very much!

Date: 2018-12-10 10:01 pm (UTC)
syntheid: [Elementary] Watson drinking tea looking contemplative (Default)
From: [personal profile] syntheid
There isn't really just one standard size, honestly. You're more limited by the layout you picked and CSS. The default layouts are built for mobile, but most of them aren't really built with header image handling into them, so you might have to work with that a bit to get what you want, but you certainly can make them degrade for mobile.

Unless you're talking about putting an image on the profile page in which case, the height is whatever you want though probably you'll want to stick with something smaller than 500px so people don't have to scroll past it, but the max width seems to be about 910px and if you want it to shrink for mobile users you'll have to make sure to add a style="max-width: 100%" to your image.
Edited Date: 2018-12-10 10:01 pm (UTC)

Date: 2018-12-11 01:10 am (UTC)
mossgreen: Close-up of a thistle in flower (Default)
From: [personal profile] mossgreen
I've got a comm using Librarian's Dream that has a header banner of 1000px wide, but I honestly wouldn't go wider than that!!

I didn't know about the max-width thing; I'll have to try that.

Date: 2018-12-11 01:47 am (UTC)
momijizukamori: Green icon with white text - 'I do believe in phosphorylation! I do!' with a string of DNA basepairs on the bottom (Default)
From: [personal profile] momijizukamori
So, there's a lot of flexibility to be had, honestly, and it depends on how you want things to look when it's done! Our default set-up puts the header image as the background of the header container, and lets you pick how tall you want the container to be - the width is the width of the entire content area, unless you use CSS to modify it. On a smaller screen (including mobile), the width just shrinks to match the width of the content area. And then there's CSS you can add to modify how it behaves - whether the image repeats if it's not big enough for the whole area, or stretches to fill it, and whether it shrinks as the page gets narrower, or just gets cut off instead.

ALL THAT SAID. It's generally easier to make a big image look good smaller than to go the other way, so I'd go for a width of 2000px and probably not more than 400px tall, which will cover all the big screens out there (this is what it looks like on my 1920 x 1080 laptop screen, for example - I can give you some CSS to fix the header text positioning, heh) and then just make some tweaks to have it look better on a smaller screen. Or, you could have a different version for smaller screens, because CSS is exciting that way!

Date: 2018-12-11 02:26 am (UTC)
momijizukamori: Green icon with white text - 'I do believe in phosphorylation! I do!' with a string of DNA basepairs on the bottom (Default)
From: [personal profile] momijizukamori

Ratio is somewhat important, though you you can do a lot of the tweaking with that with CSS - mostly you just don't want an image that's too tall, because it'll take up so much of the vertical screen space. FWIW, the largest of those screenshots is only 635 kB baseline, and only 287 kB after I ran some compression on it without much quality loss. But if you're concerned about mobile use, it may be worth it to have a second header that's more optimized for mobile and probably more in the 700px x 150px range

Profile

Dreamwidth style system discussion

July 2025

S M T W T F S
  123 45
6789101112
13141516171819
20212223242526
2728293031  

Style Credit

Expand Cut Tags

No cut tags
Page generated Aug. 26th, 2025 01:51 pm
Powered by Dreamwidth Studios