If you’re using full-bleed images on your home page, there’s a chance your photos may get cropped in an unfavorable way, depending on their composition.

This is simply due to the nature of full bleed images when used on a web page. Computer monitors and browser windows vary in size and proportion, and in order for the image to span the entire width and height of the screen, the image is almost certainly going to bleed off the screen somewhere.

The default alignment is to keep the home page image at the top center of the screen, cropping both the right/left and bottom of the image.

If you’re image has a composition that would be better off being cropped an another way, you can paste this code into your "Head" field on your “Settings > Custom Code” page:

    body.bleed #billboard img { object-position: bottom left !important; }

This will “lock” the image to bottom left of the browser window and crop the top and right side of the image.

Other possible alignments:

  • top center
    This is the default, and usually the best for photos of people. It will crop both sides evenly, and the bottom, keeping the top locked to the top of the window.
  • top right
    This will lock the top right edge, cropping the left and bottom sides.
  • center left
    Lock the left edge, and crop the top, bottom and right sides.
  • center center
    Crop all sides evenly, keeping the image centered at all times.
  • center right
    Lock the right edge, and crop the top, bottom and left sides.
  • bottom left
    Lock the bottom and left edges to the screen, and crop the top and right sides.
  • bottom center
    Lock the bottom edge and crop the left, right, and top sides.
  • bottom right
    Lock the bottom and right edges to the screen, and crop the top and left sides.
Did this answer your question?