Genesis has the ability to display custom background images in the index.html file.

Adding Custom Background Images

You can create your own image or use a licensed photo to display as background imagery in Genesis. 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/photos for all of your site’s graphics.
2. Open the index.html file in your code editor.
3. Search for the following id: big-img
4. Search for the style attribute and type the directory/file path for the background image in the parenthesis of background-image: url(‘ ‘).
5. Save the index.html file.
6. Repeat steps 3-5 as necessary.

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

<section id="big-img" data-scroll-index="0" class="big-img overlay cover-big-image anchor" style="background-image: url('images/photos/background_photo.jpg')">

Genesis has the ability to display custom background images in the index.html file.

Adding Custom Background Images

You can create your own image or use a licensed photo to display as background imagery in Genesis. 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/photos for all of your site’s graphics.
2. Open the index.html file in your code editor.
3. Search for the following id: big-img
4. Search for the style attribute and type the directory/file path for the background image in the parenthesis of background-image: url(‘ ‘).
5. Save the index.html file.
6. Repeat steps 3-5 as necessary.

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

<section id="big-img" data-scroll-index="0" class="big-img overlay cover-big-image anchor" style="background-image: url('images/photos/background_photo.jpg')">

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.