XF 1.4 Fix? background image stops under header

[creativeforge]

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!

 

[creativeforge]

I was able to make it stretch to the sides using : background-size: cover; in the miscellaneous CSS box in Style properties/General/HTML.

 

[creativeforge]

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