Top Banner Scaling

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