best dimensions for header image for variety of displays?

[Doctor Zeus]

When I created the banner image for my forum I measured its width from a screenshot on my PC of the forum width, which is currently set at 90%. I just eyeballed it and made the dimensions 1712 x 604. However my computer screen display dimensions are 1920 × 1080. So 90% of that width is actually 1728 pixels. But anyway...

I've noticed that when viewing the forum on my iPad that the banner image is too large to fit onto the screen. It still remains centered but it cuts off both sides. On the PC of course I see the entire banner image, though.

Any suggestions as to how to format the width of the forum and the banner image in order to get a consistent full fit for tablets without losing the full width of the image on a computer screen?

For reference sake, here's the forum: dceufilms.proboards.com/

[Tumbleweed]

Apr 1, 2016 7:14:41 GMT -8 Doctor Zeus said:

When I created the banner image for my forum I measured its width from a screenshot on my PC of the forum width, which is currently set at 90%. I just eyeballed it and made the dimensions 1712 x 604. However my computer screen display dimensions are 1920 × 1080. So 90% of that width is actually 1728 pixels. But anyway...

I've noticed that when viewing the forum on my iPad that the banner image is too large to fit onto the screen. It still remains centered but it cuts off both sides. On the PC of course I see the entire banner image, though.

Any suggestions as to how to format the width of the forum and the banner image in order to get a consistent full fit for tablets without losing the full width of the image on a computer screen?

For reference sake, here's the forum: dceufilms.proboards.com/

Screen resolutions can vary as you know so there is really no perfect width since a graphic is a certain number of pixels in width/height and won't necessarily match say, a 90% width of whatever screen resolution your screen is.  So a fluid banner is better. Or having a repeating background like ProBoards uses here and then the forum name (logo) is separate from the graphic background.  That said, some people just pick a pixel width and may opt on the smaller size like 1240px and stick with that.

You can, try adding this to your style sheet leaving your width as is and see if you are o.k. with how it changes your banner with smaller screen resolutions.

#banner {
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}

Sorry, no perfect answer to your question.

[Doctor Zeus]

Okay, thanks. The code does work but it letter-boxes the banner image. I guess I'll ask the users which version they prefer. Thanks again!