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:
- 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.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.html file.
- 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:
- 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 style.css file in your code editor.
- Search for the following classes: .parallax-banner-1, .parallax-banner-2, etc.
- Type the directory/folder path and name for the image.
- Save the style.css file.
- 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.