1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Header/Image full width with stretch

Discussion in 'Tips and Guides [Archive]' started by Brett Peters, Feb 10, 2011.

  1. Brett Peters

    Brett Peters Well-Known Member


    One of the first things that I wanted to do when I got XF was to change the header to a full width image that automatically stretches with browser size.

    Visual example

    Screen shot 2011-03-01 at 2.39.22 PM.png

    How To

    Firstly you need to ftp your desired image to your server, For this explanation I have named the desired image header.jpg and placed it in the root of my domain.

    Navigate to ACP > style properties > header and navigation and select Header under settings
    Select background color, select clear value and hit OK
    For position entered center

    Screen shot 2011-02-10 at 11.50.51 PM.png

    Navigate to ACP > Templates > Header.css

    You want to change this

        @property "header";
        background-color: @primaryMedium;
        @property "/header";
    To this (replacing header.jpg to you image name and location)

        @property "header";
        background-image: url('header.jpg');
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.header.jpg', sizingMethod='scale');
                -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='header.jpg', sizingMethod='scale')";
        @property "/header";

    I have tested the following on Safari, Firefox, IE and chrome

Share This Page