如何让Kajabi背景图片始终完整适配无裁切无变形？

Hey there, let's tackle this hero background image issue on your Kajabi site. I've dealt with this exact problem before, so here's a step-by-step solution using custom CSS that should get your image displaying fully without cropping or distortion:

Step 1: Access Kajabi's Custom CSS Editor #

First, log into your Kajabi dashboard and navigate to:

• Website → Themes → Select your active theme → Custom Code → Find the CSS tab (this is where we'll add our fixes).

Step 2: Target Your Specific Background Image Class #

You provided the class .background-image--1523373811158 for your hero background. Add this CSS snippet to the editor, and I'll break down what each part does:

/* Force hero background image to show fully without distortion */
.background-image--1523373811158 {
  background-size: contain !important; /* Shows full image, no cropping */
  background-repeat: no-repeat !important; /* Prevents image tiling */
  background-position: center center !important; /* Centers image horizontally/vertically */
}

/* Adjust hero section height to fit the image (critical for no blank space) */
.hero-section {
  min-height: auto !important; /* Let the image's height dictate the section height */
  padding-top: 56.25% !important; /* Use this if your image has a 16:9 aspect ratio (1080/1920 = 0.5625) */
  /* If your image has a different ratio, calculate it: (image height / image width) * 100 */
}

Key Notes: #

• The !important flag ensures our styles override Kajabi's default theme CSS.
• The padding-top trick maintains your image's aspect ratio across all screen sizes. For example:
  • 4:3 ratio → padding-top: 75%
  • 1:1 square → padding-top: 100%
• If you notice the hero section is too tall/short, tweak the padding-top percentage to match your exact image dimensions.

Step 3: Preview and Save #

After adding the CSS, click Preview to test how it looks on desktop and mobile. If everything looks good, hit Save to apply the changes live.

Fallback Tip: #

If the specific class .background-image--1523373811158 ever changes (sometimes Kajabi updates dynamic class names), use a more universal selector like .hero-section .background-image instead to target all hero background images.

内容的提问来源于stack exchange，提问作者paulmiller3000