• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Fix? background image stops under header

#1
My background image stops under the header. I've tried many ideas found through search, but obviously it's not working. Is there a way to get the {html} background image to extend fully to the top, as well as to the sides? Thanks! upload_2015-3-22_12-39-25.png
 
#3
To make the background image reach the top of page despite header height, I needed to modify the header.css template like so:

Go to Templates/header.css

CHANGE:

#header
{
@property "header";
background: rgb(some numbers) url('path/to/style/image') repeat-x top;
@property "/header";
}

TO
:

#header

{
@property "header";
background: transparent;
@property "/header";
}

CHANGE:

#logo {
display: block;
float: left;
line-height: {xen:calc '@headerLogoHeight - 4'}px;
*line-height: @headerLogoHeight;
height: @headerLogoHeight;
max-width: 100%;
vertical-align: middle;
}

TO:

#logo {
display: block;
float: left;
line-height:0px;
*line-height: @headerLogoHeight;
height: @headerLogoHeight;
max-width: 100%;
vertical-align: middle;
}

The values you will find may differ a bit, but the main changes have to do with
- make the header background transparent
- change the height of the logo to 0px



Hope it helps someone else some day! Those little things can drive you nuts sometimes...

Andre