vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB5 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=262)
-   -   Top Banner Scaling (https://vborg.vbsupport.ru/showthread.php?t=325161)

SteveAngelis 05-27-2017 02:49 PM
Top Banner Scaling
 
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 05-28-2017 12:50 AM
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 05-28-2017 03:39 AM
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 05-28-2017 10:17 AM
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 05-28-2017 12:10 PM
My web site is http://svcommand.com/sv8/

In Omnibus 05-28-2017 12:52 PM
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 05-28-2017 04:16 PM
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 05-28-2017 05:22 PM
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 05-29-2017 02:12 AM
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.

Code:
.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 05-29-2017 10:31 AM
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.

Code:
.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.

SteveAngelis 05-29-2017 01:04 PM
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 05:23 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01235 seconds
  • Memory Usage 1,745KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (2)bbcode_code_printable
  • (5)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (11)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete