View Single Post
Old 29 May 2017, 13: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