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:
- 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.
- Open the index.html file in your code editor.
- Search for the following id: big-img
- Search for the style attribute and type the directory/file path for the background image in the parenthesis of background-image: url(‘ ‘).
- Save the index.html file.
- 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.