Posted by AmandaNorton on

i'm trying to load image into the header which contains a logo with writing next to it but for some strange reason the image is cropped - logo is always chopped off and the text is perfectly centered. 

i've tried to put the image into the extra banner html box but it comes out blurry and the wrong size. 

where am i going wrong?

Posted by Joe Oldak on

I guess you're talking about the Thakeham Table Tennis website?

The banner area in the Bootstrap theme will try to ensure that the image always fills the space - it's intended more for a background style image rather than a logo. However if you provide a banner image of the 'perfect' size it should do the job just fine!

The key here if using a banner image I think would be to note that when the browser is at full width, the banner area is 1140x120 pixels.

So if your banner image has a taller aspect ratio than this, then it'll be cropped top and bottom at this size.

So you could try providing a banner image of this size, or you could tweak the CSS to make the banner area a bit taller. Something like this added to the Extra Header HTML might do it:

#banner-inner {
  min-height: 140px;

Hope this helps!

I see you're also dabbling with the Background Image includelet. Similar to the banner image, this will always try to fill the image into the space, so you'll find that the top/bottom or sides may be cut out depending on the width of the browser.

If you want to have a fixed aspect ratio you can do this in the includelet settings, though you may then find that any overlaid text is lost at narrower browser widths. If so, you can just unset the aspect ratio for the background image and it'll always be as tall as necessary for the text to fit in.



3: problems setting up header (response to 2)
Posted by AmandaNorton on

Hi Joe

Yes it is the Thakeham Table Tennis site. Thanks for clarifying the size for banners. It might be helpful to have that written somewhere outside the forum. 

I changed the size of the header image to 1140 x 120 and at the same time decided to remove the logo from the banner and show it separately using the logo function. I'm now getting great sized text but have 2 logos displaying - 1 blurry but in the right spot and 1 sharp but in the wrong spot.   

I'm ok with the includelet as it is. It fills a very blank space while we wait to populte the site with some non-stock-image images and it resizes nicely for different browser sizes.   

Thanks for your help.