Relativity allows you to add a hero background image and your latest project or portfolio images into the template.

Adding a Hero Background Image

To add your own hero background image to the index.html and about.html pages, follow these instructions:

1. Select the images from your PC that you want to showcase and resize them, if necessary.
2. Copy those images to the assets/images folder.
   • If you’re testing the template locally on your PC, then simply copy those images.
   • If you’ve already uploaded the template to your host’s server, then FTP those images into the assets/images folder.
3. Open the index.html and about.html files in a code editor and look for these sections within the file:
   • Main index: background section
   • About page: profile section
4. Change the file names to the file names of your hero background images.
   • For more information, refer to the code examples.
5. Save the file and view the updates on your PC.
   • If you’re testing locally, simply drag the index.html and about.html files into an empty tab of your favorite internet browser.
   • If you’ve already uploaded the template to your host’s server, then FTP the updated index.html and about.html files, and then view it in your browser.

Here is the code which you need to modify to display your new hero background image for the index.html page:

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

Here is the code which you need to modify to display your new hero background image for the about.html page:

<div class="col-lg-12">
    <img src="assets/images/about.jpg" class="fade-in" id="profile" alt="">
</div>

Adding Project or Portfolio Images

To add your own images, follow these instructions:

1. Select the images from your PC that you want to showcase and resize them, if necessary.
2. Copy those images to the assets/images folder.
   • If you’re testing the template locally on your PC, then simply copy those images.
   • If you’ve already uploaded the template to your host’s server, then FTP those images into the assets/images folder.
3. Open the index.html and project.html files in a code editor and look for the following:
   • Main index: projects section
   • Project page: media section
4. Change the file names to the file names of your project/portfolio images.
   • For more information, refer to the code examples.
5. Save the file and view the updates on your PC.
   • If you’re testing locally, simply drag the index.html and project.html files into an empty tab of your favorite internet browser.
   • If you’ve already uploaded the template to your host’s server, then FTP the updated index.html and project.html files, and then view it in your browser.

Here is the code which you need to modify to display your new project and portfolio thumbnail images in the index.html page:

<div class="item-wrapper">
    <img src="assets/images/project-1.jpg" alt="">
</div>
...
<div class="item-wrapper">
    <img src="assets/images/project-2.jpg" alt="">
</div>
...
<div class="item-wrapper">
    <img src="assets/images/project-3.jpg" alt="">
</div>
...
<div class="item-wrapper">
    <img src="assets/images/project-4.jpg" alt="">
</div>

Here is the code which you need to modify to display your new project and portfolio images in the project.html page:

<div class="media col-lg-12">
    <img src="../assets/images/detail-1.jpg" data-rjs="2" alt="">
</div>
...
<div class="media col-lg-12">
    <img src="../assets/images/detail-2.jpg" data-rjs="2" alt="">
</div>
...
<div class="media col-lg-12">
    <img src="../assets/images/detail-3.jpg" data-rjs="2" alt="">
</div>