Customising the hero section is a great way to apply your branding to your site:


To change the hero background, you'll need to add custom CSS in to the custom code section in your Preferences.

Here are a few CSS snippets you can copy/paste.

To set a solid background color

  1. Find out the hex code for your desired color. (Or select a hex code here htmlcolorcodes.com)

  2. Paste the hex number into the following code, replacing #000000.

  3. Paste your new code into the CSS section in Preferences > Custom Code.

.page.page--home .hero {
background: #000000 !important;
}


Or set a background image

You can set a background image by providing the URL to a hosted image. Make sure to only use images hosted by trusted parties with their permission. In this example, we're using an image from Unsplash, which is a free resource of usable images.

  1. Find the URL for your desired image.

  2. Paste your URL into the following code below, replacing the entire contents of the brackets starting: url(................

  3. Paste your new code into the CSS section in Preferences > Custom Code.

.page.page--home .hero {
background-image: url(https://images.unsplash.com/photo-1515601676794-99ee5cd20a58?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80) !important;
background-repeat: no-repeat !important;
background-position: 50% 50% !important;
background-size: cover !important;
}


Need help?

If you need additional support hit the chat button and we'll be delighted to help you get your board designed exactly how you'd like it 👊

Did this answer your question?