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:
- 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.
- Open the index-home.html file in your code editor.
- Search the code for the specific section you wish to add custom background images to.
- Type the directory/folder path and name for the image.
- Save the index-home.html file.
- 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.