Knowledge Base

Browse through our expansive online help documentation.

Adding Background Images in Phantom

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

  • Business index page (slider and video)
  • Personal index page (slider and video)
  • Business project details page (slider and video)
  • Personal project details page (slider and video)

Adding Custom Background Images

You can create your own image or use a licensed photo to display as background imagery in Phantom. 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 hero slides:

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

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

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

Adding Parallax Background Images

Phantom uses parallax background scrolling for certain sections in the slider and video versions of the template. Default file names for the parallax images (i.e. parallax-banner-1.jpg) have already been embedded in the style.css file. You can keep those default names for the six parallax background images, or modify them.

To add a parallax 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 style.css file in your code editor.
  3. Search for the following classes: .parallax-banner-1, .parallax-banner-2, etc.
  4. Type the directory/folder path and name for the image.
  5. Save the style.css file.
  6. Repeat steps 1-5 as necessary to add all six parallax images.

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

.parallax-banner-1 {
background: url('../images/parallax-banner-1.jpg'); background-attachment:fixed; background-position:center center; } .parallax-banner-2 {
background: url('../images/parallax-banner-2.jpg'); background-attachment:fixed; background-position:center center; }

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.