Top Banner Scaling

[SteveAngelis]

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]

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]

Originally Posted by SteveAngelis

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]

Originally Posted by webmastersun

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]

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

[In Omnibus]

Originally Posted by SteveAngelis

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

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]

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]

Originally Posted by noypiscripter

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]

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.

.headerwrap {
    height: 201px;
    background-image: url(core/images/eridanus/eridanus_headerbg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

"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]

Originally Posted by noypiscripter

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.

.headerwrap {
    height: 201px;
    background-image: url(core/images/eridanus/eridanus_headerbg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

"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.