XF 2.2 Change the height of the header background image

RichDevman

Active member
As you can see from my image, the header background image height needs to be adjusted due to the banners on the right side. Could it be as simple as just uploading a new image or can I adjust this one? I would even be open to adding another background image in that open space if possible.

What do you guys think?
 
There are two possible things at play, the dimensions of the header itself and the dimensions of the background image. You can set both with css in style properties Header and Navigation > Header/Logo row

You can change the height of the header:
Code:
height:200px;

The padding there can also affect the position of the logo and dimensions of the header itself so some trial and error can be useful using both properties

Background image size is determined by the background-size css property in extra.less EDIT: which can also do in the header/logo row CSS

Either specific dimension or various other such as background-size:cover (This stretches the image to fill the header

 
Last edited:
You suggestion for the height worked to increase the size of the header. How do I increase the size of my logo to fill it. My logo is more than large enough to fill the space at 17185x570 I would think.

header.webp
 
There are two possible things at play, the dimensions of the header itself and the dimensions of the background image. You can set both with css in style properties Header and Navigation > Header/Logo row

You can change the height of the header:
Code:
height:200px;

The padding there can also affect the position of the logo and dimensions of the header itself so some trial and error can be useful using both properties

Background image size is determined by the background-size css property in extra.less EDIT: which can also do in the header/logo row CSS

Either specific dimension or various other such as background-size:cover (This stretches the image to fill the header

Thank you for that suggestion. height: 200px basically adjusted my background image to fit the area.
 
Back
Top Bottom