Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 27 May 2017, 16:49
SteveAngelis SteveAngelis is offline
 
Join Date: Nov 2009
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?
Reply With Quote
  #2  
Old 28 May 2017, 02:50
In Omnibus's Avatar
In Omnibus In Omnibus is offline
 
Join Date: Apr 2010
Real name: Kris
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.
Reply With Quote
  #3  
Old 28 May 2017, 05:39
webmastersun's Avatar
webmastersun webmastersun is offline
 
Join Date: Oct 2013
Originally Posted by SteveAngelis View Post
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!
__________________
The best webmaster forum & internet marketing forum for webmasters and internet marketers.
Reply With Quote
  #4  
Old 28 May 2017, 12:17
In Omnibus's Avatar
In Omnibus In Omnibus is offline
 
Join Date: Apr 2010
Real name: Kris
Originally Posted by webmastersun View Post
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.
Reply With Quote
  #5  
Old 28 May 2017, 14:10
SteveAngelis SteveAngelis is offline
 
Join Date: Nov 2009
My web site is http://svcommand.com/sv8/
Reply With Quote
  #6  
Old 28 May 2017, 14:52
In Omnibus's Avatar
In Omnibus In Omnibus is offline
 
Join Date: Apr 2010
Real name: Kris
Originally Posted by SteveAngelis View Post
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.
Reply With Quote
  #7  
Old 28 May 2017, 18:16
noypiscripter's Avatar
noypiscripter noypiscripter is offline
 
Join Date: Aug 2013
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.
__________________
Glenn Vergara, an ex-vB Developer, now a vB Mod Developer

GIPHY for vB5 | AutoLinker | Video Attachments Player | New Registered Users Module | Clear System Cache Cron | DragNDrop Upload | Topic AJAX AutoUpdate | Force Read Topic
Reply With Quote
  #8  
Old 28 May 2017, 19:22
In Omnibus's Avatar
In Omnibus In Omnibus is offline
 
Join Date: Apr 2010
Real name: Kris
Originally Posted by noypiscripter View Post
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;
}
Reply With Quote
  #9  
Old 29 May 2017, 04:12
noypiscripter's Avatar
noypiscripter noypiscripter is offline
 
Join Date: Aug 2013
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.
__________________
Glenn Vergara, an ex-vB Developer, now a vB Mod Developer

GIPHY for vB5 | AutoLinker | Video Attachments Player | New Registered Users Module | Clear System Cache Cron | DragNDrop Upload | Topic AJAX AutoUpdate | Force Read Topic
Reply With Quote
  #10  
Old 29 May 2017, 12:31
In Omnibus's Avatar
In Omnibus In Omnibus is offline
 
Join Date: Apr 2010
Real name: Kris
Originally Posted by noypiscripter View Post
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.
Reply With Quote
  #11  
Old 29 May 2017, 15:04
SteveAngelis SteveAngelis is offline
 
Join Date: Nov 2009
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.
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 11:24.

Layout Options | Width: Wide Color: