How to add a header image and customize it

Product Support

AI-generated summary

A user, calebs, is looking to add a header image to their Discourse forum and is seeking advice on how to achieve this with CSS. aatishrkamble suggests using the Versatile Banner theme component, which allows for the addition of a header image, as well as other features like CTA buttons and links. However, calebs finds the template to be outdated and only wants a simple header image. aatishrkamble advises that the extra features can be removed through the component settings. After removing the text, calebs encounters an issue with the image size, but aatishrkamble provides a CSS solution to adjust the image size. This solution works for calebs.

1

I recently came across a forum that uses a header image very nicely. Not sure what their theme is, but could anyone shed some light on how to create something similar to this with the CSS?

Woot
Woot1279×647 91.1 KB

2

There is a theme component called Versatile Banner which allows you to add a header image and lots of other cool stuff like CTA buttons and links.

3

Thank you, but the template is similar to something we would see in the late 90s. I simply need to put a header image, without all these texts and buttons.

4

You can remove all those texts and buttons and keep just the header image. Its all in the component settings.

5

Removing all texts makes the image super small, almost hidden.

6

Add this to your theme template:

.banner-box .section-header {
    margin-top: 50px;
}

Change the px value according to your need.

7

Thank you! This helped!