1. 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

Discussion in 'Styling and Customization Questions' started by creativeforge, Mar 22, 2015.

  1. creativeforge

    creativeforge Active Member

    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
     
  2. creativeforge

    creativeforge Active Member

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

    creativeforge Active Member

    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
     

Share This Page