Hydro has the ability to display custom background images in several sections of the HTML files. These sections include:
- Single index page (hero image and other sections)
- Slider index page (hero slider and parallax sections)
- Video index page (parallax sections only)
Adding Custom Background Images
You can create your own image or use a licensed photo to display as background imagery in Hydro. 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:
<li style="background-image: url('include/images/slide-1.jpg');"></li> <li style="background-image: url('include/images/slide-2.jpg');"></li>
<li style="background-image: url('include/images/slide-3.jpg');"></li>
<li style="background-image: url('include/images/slide-4.jpg');"></li>
Adding Parallax Background Images
Hydro uses parallax background scrolling for certain sections in the single, 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-position:center center; } .parallax-banner-2 {
background: url('../images/parallax-banner-2.jpg'); 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.