How do I restrict the header width, but have the height scale to allow the background image to render nicely?

Question

I wish to do the following:

• Set the page layout to fluid (so the page width changes dynamically)
• Set the Header to be 70% of the page width (to allow some whitespace either side of the page)
• Include an image in the header as the background.
• Have the image be dynamically resized (maintaining the aspect ratio to avoid distortion of the image) such that it fits the width of the header
• Have the height of the header change to match the resized image.

I.e. I always want to see the image in the correct proportions - and I want it to fill the header so there is no whitespace above or below the image. The problem appears to be that I have to set a fixed header height - I can't set that to some dynamic value. If there was an option to 'scale header height with background image' that would probably solve my issue, alas not ;)

Is this possible? If so, how do I achieve this?
If this is not possible, can anyone suggest an alternative which might approximate that?

Thanks,

R

Answer 1

Hi,

Please follow the given steps :

• TemplateToaster -> Page -> Layout -> Fluid and  set width in %age.
• TemplateToaster -> Header -> Background -> Images -> More
• Set height of header for Desktop, Tablet and Mobile which you can see at Bottom left corner. TemplateToaster -> Desktop  -> Header -> Height.  Similarly, for tablet and mobile.

Comments

Thanks for the answer, and unfortunately it doesn't really solve the problem.

You have to specify the height of the header using a fixed value, which means that as you decrease the width of the browser window, the width of the header reduces, but the height does not (until you reach whatever arbitrary width you have designated as 'tablet' sized). This means that shape of the header changes, and based on a very quick test, the background header image is 'dynamically cropped' to ensure it fits the new shape.

Eventually, as you continue to reduce the size to 'tablet' dimensions, the tablet view kicks in, the page 'jumps' to that view (with the correctly proportioned image once more), and then the same issue kicks in until you reach 'mobile' width - as you resize the width of the page, the width of the header changes but the height remains the same.

I would like the height of the header to also scale in some way, not just the width. For example, you could set the page width to say 80% with have an option 'Set max-width = x pixels' (or have an option to lock it to the background image size), and in the header, set an initial height (again either some set value or lock it to the background image), and then an option to 'maintain header aspect ratio' such that if the width is reduced, the height is reduced by an appropriate amount.

This does seem possible via CSS (I've found some suggestions on stack overflow with appropriate CSS and demos, (not sure if it's acceptable to post the link here) but I of course have no idea how easy or hard that might be to implement in TT.

I will have a play and see if I can come up with some option that works for me.

Thanks,
R

---

Header Sizing. I think I figured this out, not exactly what the techs said, but close: Most of us want a header image to fill the space. To do this, don't go to the Image Tab but to Background, Images, More. Be sure to add the image this way, because if you go through the Image Tab the options you need won't be highlighted. Once your image is selected, go to the drop down under Stretch and Click Uniform to Fill. Save. That works, but it is hidden, and a long way around and something that should be simple.