Align image to top for Image with text overlay

Example before:

Tall height setting with no parallax - Image is 3/4 height of screen and positioned to the center (top of image is cropped).

Example after:

Same 3/4 height with the image positioned to the top (no cropping on top, lower is cropped).

Note: Works only when parallax scroll is turned off.

Code:

/* -- code to use top position on image for Image with text overlay -- */
.template-index .homepage-image .background-size-cover {
    background-position:center top;
}
/* - end - */

Using this will also affect any slideshow sections you have on your homepage. If you are using a slideshow on your homepage and would like those images to remain centred - Use this code instead:

/* -- alternate code to use top position on image for Image with text overlay -- */
.template-index {
  .homepage-image .background-size-cover {
      background-position:center top;
  }
    .homepage-slideshow .background-size-cover {
      background-position:center center;
  }
} 
/* - end - */

That will return the slide-show to a centred position while the Image with text overlay banner is aligned to the top.

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code