Urgent - What is the size of the header logo?

Hi everyone,

I've got a artist on my site right now designing a logo for my forum and he is asking all questions I don't understand, such as this:

Quote

Is there a way i can have a template off your site, or a copy of the image files that need to be replaced from the forum.

He's designing my logo which will go in the header of every page of my site. Is there a particular size this image should be?

Anything else he needs to know, he is designing all my social media related images too.

thanks

Jupiter

This is the problem. The image needs to display both on huge monitors as well as on tiny smartphones.

WoltLab give no guidance in the ACP about the size of the header. They talk about things like favicon, but nothing about the header.

What do you have at the top of your page GTB, do you have a link to it?

Quote from Alexander Ebert

Jupiter There are two different logos, the main one and the smaller version that is used for Smartphones. The mobile one should not be higher than 30 Pixels, for the desktop use whatever you're comfortable with.

There is one thing that you should consider: Request your logos to be of double the display size! For example, the default mobile logo is displayed at 55x30 Pixels, but actually is 110x60 Pixels large. This makes sense on Retina/4K-Displays that render things as if they are the "original" size, but use a 4 times larger pixel density, so using regular images will cause them to be blurry instead of being crystal clear.

Alexander, thanks for the reply.

I've got a draft image in my header now:

https://www.forumbox.co.uk/forum/

At the moment the image is too big in some regards, too boxy and doesn't fill the whole header, it doesn't stretch across the screen.

I don't have a 4k display, so I've got no way to check what the image looks like on these displays.

What do you reckon would be the correct sized image I need to fill the whole of the whole header please both on normal sized screens and 4k ones?

I'm not sure I fully understand about the mobile comments, but if I tell the artist that the mobile image needs to be 55x30, but with 4 times more pixels for retina displays, is that correct?

thanks

Thanks Alexander.

I'm not sure I exactly understand your comments, but Iwill ask the artiest to look at this thread.

As I understand it, images need to be four times larger if required for 4k displays than standard ones, but I don't know how to tell the artist how to achieve this. Hopefully, he might know!

Quote from Hitman

The logo is not meant to fill the header with it.

To fill the header you should work better with background pictures!

Example:

CSS

@include screen-lg {
    .pageHeaderContainer {
        background: url('#{$style_image_path}yourheaderbackground.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}

Hi Hitman,

My logo isn't finished yet and although the two words of the name of my forum will only fill a small proportion of the header, the background will have additional tiny words "faded" into it and its these that I want across the whole page.

Once the logo is done, may I come back to ask you some questions, as I don't know what to say to the artist about how to achieve this?

thanks

Thanks Alexander for that. Much appreciated.

Never owned a smartphone, my 15 year old Nokia phone is doing just fine.

I copied the code that Hitman posted into my site, but I haven't "quite" got there yet, with regards the header. I may have a few more questions over the next few days, if that is okay.