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

• Home/Slides (business, personal, 404, and coming soon)
• About (business and personal)
• Contact (business, personal, and portfolio)
• Header (portfolio)

Adding Custom Background Images

You can create your own image or use a licensed photo to display as background imagery in Sub-Zero. 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.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.html file.
6. Repeat steps 1-5 as necessary.

Here is the code which you need to modify to add new slides:

<div style="background-image: url('include/images/slide-1.jpg');" class="image-fullscreen"></div>
...
<div style="background-image: url('include/images/slide-2.jpg');" class="image-fullscreen"></div>
...
<div style="background-image: url('include/images/slide-3.jpg');" class="image-fullscreen"></div>
...
<div style="background-image: url('include/images/slide-4.jpg');" class=image-fullscreen"></div>

Here is the code which you need to modify to add a new about image:

<div class="header" style="background-image: url('include/images/about.jpg')">

Here is the code which you need to modify to add a new contact image:

<div class="header-inherited" style="background-image: url('include/images/contact.jpg')">

Here is the code which you need to modify to add a new header image:

<div style="background-image: url('include/images/header.jpg');" class="image-fullscreen"></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.