Top Align Background Image

By default, Full Screen Background Images tries to put the center of the image in the center of the page. With a taller image like the one below there may be the appearance that part of the image is cut off depending on the orientation of the visitor's screen. 

A picture like that will look like this by default:

Such a nice picture, but his shoulders and up get cut off.

Fortunately, it can be re-positioned with a little bit of CSS styling.

To reposition the image

  • Log in to your admin area, and navigate to Appearance > Customize.
  • Scroll down to the Additional CSS section.
  • Place the following style in the box:
    .backstretch-item img {
         top: 0 !important;
    }	
  • Click the "Publish" button.
  • This should take care of the issue for you. However, if your site is using any caching or other optimization tools, you may need to clear them before the change takes effect on the site.

You would then get a background that looks like this: