vBulletin Mods

The Official vBulletin Modifications Site
https://www.vbulletin.org/forum/showthread.php?t=325161

Top Banner Scaling
by SteveAngelis
27 May 2017 16:49

Hello All,

Where would you go to adjust the scaling of the banner at the top of the page, mainly the background banner at the top? I have not seen a spot in the header to make this change.

In short, when the resolution of the screen or the size of the browsing window changes, the image squishes in and the size of it changes with the window size. As such, it makes the proportions look off. Is there a place that I can change this?

In Omnibus 28 May 2017 02:50

If the logo (banner) is designed for the largest screen resolution it shouldn't lose proportion when the media queries cause the site to be responsive on smaller screens.

There is no setting that will allow you to modify the resolution of the logo image.

Without more information, the only thing I can guess is that your logo is either too low resolution, not transparent, or surrounded by too much "white space."

If you want to post (or PM) a link I can possibly get a better understanding of the issue and help you resolve it.

webmastersun 28 May 2017 05:39

Quote:

Originally Posted by SteveAngelis (Post 2587024)
Hello All,

Where would you go to adjust the scaling of the banner at the top of the page, mainly the background banner at the top? I have not seen a spot in the header to make this change.

In short, when the resolution of the screen or the size of the browsing window changes, the image squishes in and the size of it changes with the window size. As such, it makes the proportions look off. Is there a place that I can change this?

You can use css width 100% to make your images auto resize when it appears on different screen sites.

I am using this way to make banners as responsive on our webmaster forum.

Hope that helps!

In Omnibus 28 May 2017 12:17

Quote:

Originally Posted by webmastersun (Post 2587036)
You can use css width 100% to make your images auto resize when it appears on different screen sites.

I am using this way to make banners as responsive on our webmaster forum.

Hope that helps!

Yes, but the logo in vBulletin 5 is already responsive so there should be no reason to have to add a CSS attribute to the additional.css template. In fact, it is responsive for both tablets and phones. The media queries activate twice. That's why I asked for more information.

SteveAngelis 28 May 2017 14:10

My web site is http://svcommand.com/sv8/

In Omnibus 28 May 2017 14:52

Quote:

Originally Posted by SteveAngelis (Post 2587050)

OK. The problem is your banner is in jpg format which means it loses resolution when it is resized. You need the banner to be in .png or svg format for the best resolution at all sizes.

I can convert the header image to .png for you but I can't upload it here due to their attachment limits. It converts anything over 1024px wide to a jpg.

noypiscripter 28 May 2017 18:16

I'm on my phone and I see the banner squished. I think it has to do with the fixed height of the banner and/or its container. If the height is fixed and the width changes then the image dimensions will not be proportionate thus causing the issue. I cannot confirm because I cannot inspect the element and css.

In Omnibus 28 May 2017 19:22

Quote:

Originally Posted by noypiscripter (Post 2587058)
I'm on my phone and I see the banner squished. I think it has to do with the fixed height of the banner and/or its container. If the height is fixed and the width changes then the image dimensions will not be proportionate thus causing the issue. I cannot confirm because I cannot inspect the element and css.

#header .site-logo {
padding: 22px 10px 26px 10px;
background: transparent;
position: relative;
text-align: left;
}

noypiscripter 29 May 2017 04:12

The site is actually not using a logo. The banner is a background image to a custom div with class headerwrap and it (including some of the custom child tags) has a fixed height of 201px. The fixed height seems to be required in order to render the header properly.

The easiest solution without changing the custom HTML tags is to change the "background-size" CSS property from "100% 100%" to "cover". Some parts of the background image will be clipped but this ensures that the image is not squished.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

"background-size: contain" is the ideal solution to prevent the image from being clipped but it requires changing the fixed height to whatever proportionate value based on the current available width.

In Omnibus 29 May 2017 12:31

Quote:

Originally Posted by noypiscripter (Post 2587074)
The site is actually not using a logo. The banner is a background image to a custom div with class headerwrap and it (including some of the custom child tags) has a fixed height of 201px. The fixed height seems to be required in order to render the header properly.

The easiest solution without changing the custom HTML tags is to change the "background-size" CSS property from "100% 100%" to "cover". Some parts of the background image will be clipped but this ensures that the image is not squished.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

"background-size: contain" is the ideal solution to prevent the image from being clipped but it requires changing the fixed height to whatever proportionate value based on the current available width.

All of the above is true except the banner also distorts on larger resolution screens. That's why I offered the png in replacement of the jpg. The image is only 1499px wide so any resolution higher than that stretches the banner.

SteveAngelis 29 May 2017 15:04

Changing it from 100% 100% to cover did the trick! Thank you so much!

I am also going to get the image converted to a PNG.


All times are GMT. The time now is 21:19.

Powered by vBulletin® Version 3.8.14
Copyright © 2021, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright ©2001 - , vbulletin.org. All rights reserved.