How to add Header background image

Quote from dan1

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

WoltLab Cloud

File

Header Image Changer (Banner Rotation) for WoltLab Suite

You want to have diversion on your website? Than you can create it now with the Header Image Changer in a very easy way! It does not matter if you want to dynamically change your header background image or your logo, both is supported.

Black Rider

Apr 20th 2021

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.

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:

.pageHeader {
    background-image: url(#{$style_image_path}background.jpg);
    background-position: center;
    background-repeat: no-repeat;
}

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:

.pageHeaderFacade > .layoutBoundary {
    align-items: center;
    padding-bottom: 84px;
    padding-top: 84px;
}

Adjust the padding to suite your image.