How to add Header background image

  • How do I add a background image to the header? I bought this plugin


    but I don't need the image to change all the time, and this plugin reloads my one image with each page. BTW it's also supposed to change the logo but this feature doesn't work.

    It probably would be to your advantage to contact Black Rider - Developer of the Plugin.

    Usually a Plugin Developer answers questions (such as yours) through the "comments" section located within the Plugin listing.

    If not there, sometimes there is a special LINK provided by the Developer for technical assistance.

  • Please make use of the official support forum located under https://support.kittmedia.com. As customer over the WoltLab Plugin-Store you have to verify your purchase to get access to the support forum of the product.


    A link to the verification is available in the footer menu of the above mentoined site.


    As customer on shop.kittmedia.com you already have access to the support forum.

  • I don't really need this plugin. My question is how to add an image background to the header. I know it should be a simple thing I just can't figure it out. I don't even know where the header template can be edited.

  • Create a folder inside the "images" folder on your server and remember whatever name you give it. Upload your background image to this new folder.


    In your ACP go to the style you want to add the background image to and under "Data" scroll to the bottom of the page and fill in the image path with the new folder you created so it looks like this:




    Next go to your style's "Advanced Settings" and add the following to the "Individual CSS and SCSS" field:


    CSS
    1. .pageHeader {
    2. background-image: url(#{$style_image_path}background.jpg);
    3. background-position: center;
    4. background-repeat: no-repeat;
    5. }


    Change "background.jpg" to the name of your image file.


    You may need to add some space for your image to display correctly and the easiest way I found to do this is to add the following to the "Individual CSS and SCSS" field:


    CSS
    1. .pageHeaderFacade > .layoutBoundary {
    2. align-items: center;
    3. padding-bottom: 84px;
    4. padding-top: 84px;
    5. }


    Adjust the padding to suite your image.

  • Thanks again PJK for the clear and simple instructions, it worked perfectly. I'll check out your site.


    I used the code below to scale the image to fully cover the header. If anyone sees a problem with this code please let me know.


    .pageHeader {

    background-image: url(#{$style_image_path}background.gif);

    background-position: center;

    background-repeat: no-repeat;

    -webkit-background-size: cover; /* For WebKit*/

    -moz-background-size: cover; /* Mozilla*/

    -o-background-size: cover; /* Opera*/

    background-size: cover; /* Generic*/


    }


    .pageHeaderFacade > .layoutBoundary {

    align-items: center;

    padding-bottom: 16px;

    padding-top: 11px;


    }