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

• Index background (bg) page (header image)
• About page (header image)

Adding/Changing the Background Image

The index.html already has the background image embedded into the style.css file. The image name is background.jpg. If you wish to change the name of the image or use .png instead, you’ll need to update the style.css.

You can create your own image or use a licensed photo to display as background imagery in Prism. To change the 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 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 style.css file.
6. Repeat steps 1-5 as necessary.

Here is the CSS code which you need to modify to change the file name or file type (if you’re using a .png) for the index-bg-home.html pages:

.page-start.bg-image {
    background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 80% center;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    opacity: 1;
    z-index: -1;
}

Adding a Custom Background Image to the About Page

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

Here is the code which you need to modify to change the file name or file type (if you’re using a .png) for the about.html pages:

<div class="service-type">
    <img src="assets/images/about.jpg" alt="">
</div>