XF 2.2 Change the height of the header background image

[RichDevman]

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?

 

[Mr Lucky]

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:

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

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[ncrs]

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.

 

[GW2]

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:

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

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

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