Header Not Centered and Image Blurry

[mustang1989]

Hello, 
 My name is Joe and I've recently been recruited as an administrator to help the site Jerry's Cherry's Model Club out. There are a few things that need some attention with the site and one of them happens to be the banner. The current administrator has been putting the banner together for a while now but I've always noticed that it is off center and that the images are not sized properly resulting in images that are blurry and distorted. I'll give you a link to the site so you may see what I'm talking about a little more clearly. Thanks for any help that you can be, Joe

The link to the site: jerryscherrys.freeforums.net/ 

[Nscalerr 🐺]

Hi mustang1989

After having a look at the banner image, it would appear that when the banner was created, the images were enlarged from something quite small, which has resulted in them apearing blurry now. The image would have to be redone to fix that bit. Also it being 2000 pixels by 1456 pixels would mean it would not be able to be centered.

If you can get a copy of the original images and make a post in the Graphic Design board with a brief of what you want and copies of the original photos, someone would be able to make a far better banner for you.

[mustang1989]

Jul 4, 2021 1:04:02 GMT -8 Nscalerr 🐺 said:

Hi mustang1989

After having a look at the banner image, it would appear that when the banner was created, the images were enlarged from something quite small, which has resulted in them apearing blurry now. The image would have to be redone to fix that bit. Also it being 2000 pixels by 1456 pixels would mean it would not be able to be centered.

If you can get a copy of the original images and make a post in the Graphic Design board with a brief of what you want and copies of the original photos, someone would be able to make a far better banner for you.

Thanks for the reply and for the help. I've just recently been added so I'm still poking around the site and still have alot to learn about layout and designing techniques but will get with the head administrator to see if he'll let me take the wheel on this part. The photos change from month to month based on who wins that months contest but I'll look at making a post in the Graphic Design board within the coming week to see what happens. Thanks again, Joe 

[mustang1989]

Gonna bump this one up so it doesn't get too lost. Still going to check the Graphics section to see what I can get help with there as well. 

[Nscalerr 🐺]

Btw bumping it up won't help as the Staff would have marked this thread as completed internally.

Best thing is to go to the Graphic Design board and start a thread. Also it is frowned on bumping threads in the Support board.

[Kami]

Just wanted to chime in here:

It's not specifically that the image is 2000x1456 pixels that's the problem. A banner image that size, while not ideal, should automatically centre in the banner area unless otherwise selected through theme options / CSS to be aligned differently. There's nothing wrong with bumping a thread here if more than 24 hours have passed if the issue hasn't been addressed, but unfortunately for this issue, it's not a software problem and so there's nothing PB staff can do to address it.

The problem is that the banner image has whitespace that exceeds the actual boundaries for the image contents itself. [This] is the full image. As you can see below, the actual "image" part ends, and the rest of it is just empty, blank space. I've outlined the actual part of the banner you want to see in red; everything else is still part of the image, but just... empty.



So ultimately, the banner is perfectly centred, but appears otherwise because there's simply empty space. You can check this as well by narrowing the width of your browser window; because the image is centred, the right-most part will be cut off when making the image smaller, and thus displays the "correct" contents, as below.



Your forum is at a % width, meaning that the container widths that hold forum contents will automatically resize to be an exact % of the total space available — the larger your browser width, the wider the containers become. Even if you create an image with no white space, you will always have an issue with the sizing of the image as % width forums are fluid and will always adjust, while images are a static pixel size.

An image that is exactly the width and height you want it to be will be fine, you'll just experience some additional "empty" space on wider screens where the image ends.

Alternatively, you can set your forum to a fixed pixel width and make your banner image the same width as that.

Up to you!

(Edit: This will not address the pixelisation of the images within the banner since, as mentioned, they're due to being resized from much smaller images)

[mustang1989]

I will be going to the graphic designer alright but I do want to thank BOTH of you for your assistance so far. I started off by changing the forum width to 70% just to clean it up a little in the interim but will be coming back to this and making some hopefully worthwhile changes to the place. Awesome stuff and I'm learning every day. Thanks again, Joe

[Kami]

Jul 6, 2021 12:27:45 GMT -8 mustang1989 said:

I will be going to the graphic designer alright but I do want to thank BOTH of you for your assistance so far. I started off by changing the forum width to 70% just to clean it up a little in the interim but will be coming back to this and making some hopefully worthwhile changes to the place. Awesome stuff and I'm learning every day. Thanks again, Joe

Any time! Just remember a % width (even 70%) will always be a % of the total space someone has. 70% might look "right" for your browser, but for me at full screen with a superwide monitor, it doesn't:



If you want to eliminate the 'extra' space for other folks regardless of their browser width, you'll need to use a fixed pixel width instead. (If not, then disregard this! Just wanted to be sure it was clear though~!)