Knowledge Base

Browse through our expansive online help documentation.

Adding Background Images in Fusion

Fusion has the ability to display custom background images in several sections of the HTML files. These sections include:

  • Home index page (header image and other sections)
  • Portfolio page (header image and gallery)
  • Portfolio details page (header image and slider section)

Adding Custom Background Images

You can create your own image or use a licensed photo to display as background imagery in Fusion. To add a background image, follow these instructions:

  1. Add your custom background images to the directory/folder where you will store your images. For example, this could be a folder called images for all of your site’s graphics.
  2. Open the index-home.html file in your code editor.
  3. Search the code for the specific section you wish to add custom background images to.
  4. Type the directory/folder path and name for the image.
  5. Save the index-home.html file.
  6. Repeat steps 1-5 as necessary.

The previous instructions can be repeated for all of the template files containing images: about.html, contact.html, portfolio.html, and project-details.html.

Here is the code which you need to modify to add a new hero image for the index-home.html page:

<section class="hero main accent parallax" style="background-image: url(assets/images/hero-1.jpg); background-size: cover;">

Here is the code which you need to modify to add a new hero image for the portfolio.html, contact.html, about.html, and project-details.html pages:

<section class="hero small accent parallax" style="background-image: url(assets/images/hero-2.jpg); background-size: cover;">

Here is the code which you need to modify to add a new photo for the services section:

<div class="featured-project-image" style="background-image: url(assets/images/featured-1.jpg);"></div>

We recommend that you keep your images small in dimensions and below 500KB for optimal loading and scrolling. You should use the placeholder as a guide when selecting and resizing your background image. For more information, please refer to the Managing Site Images section of this document.