Why is my banner image getting cropped?

You’ve uploaded a background image, and now poor Bob from Marketing’s head is missing. Tragic. But don’t worry—we can fix this. Here’s why it’s happening and, more importantly, what you can do to save Bob.

Why it's happening?

Background images are kind of like stretchy pants—they adjust to fit the container they’re in. But here’s the catch: websites are responsive these days, meaning they’ve got to look fab on giant monitors and tiny mobile screens.

This means the size and ratio of your image’s container are constantly changing. Translation: parts of the image are bound to get cropped out. It’s not personal, Bob. It’s just how things work.

Here is what you can do.

1. Adjust the Background Position Dropdown

Right below where you uploaded the image, you’ll find the Image Alignment dropdown. This is your new best friend.

• Want the top-right corner of the image always visible? Choose Top Right.
• Want to keep the center in view? Choose Center Center.

You’ll need to experiment to find the perfect positioning, but hey, that’s half the fun.

2) Adjust the size/ratio of the container

Sometimes it’s not the image’s fault—it’s the container. The easiest way to tweak it? Adjust the padding (aka spacing).

Here’s how:

• Go to the Styles tab in the module.
• Head to Row Settings > Spacing Options.
• Add padding to the top and bottom to change the container’s shape.
  
  

Bonus: You can set different padding for desktop, tablet, and mobile. Because we’re all about that pixel-perfect life.

3) Add the image as normal content

If you absolutely, positively can’t have any part of your image cropped (Bob’s head deserves to shine), ditch the background-image route. Instead:

• Add the image directly into a content column.

The downside? You won’t be able to overlay text on the image. The upside? Bob keeps his head, and you keep your sanity.

In Conclusion…

Responsive design can be tricky, but with a little tweaking, you’ll have your background images looking amazing in no time. Experiment, adjust, and don’t forget to save! Bob—and the rest of your team—will thank you.