Shopify响应式模板：如何停止背景图片重复显示？

Hey there! No need to stress—stopping that background image from repeating is a quick CSS tweak, even with basic code knowledge. Let's walk through this step by step.

First, the core issue here is that browsers default to repeating background images to fill a container. We just need to tell it not to do that with a simple CSS property.

Step 1: Locate the Right Code to Modify #

Since you mentioned you have two code snippets related to this area, let's assume one is the Liquid template code (the part that renders the section) and the other is the corresponding CSS. For example, if your code looks like this:

Liquid template snippet:

<div class="hero-banner" style="background-image: url({{ section.settings.background_image | img_url: 'master' }});">
  <!-- Your section content here -->
</div>

CSS snippet:

.hero-banner {
  background-size: cover;
  padding: 4rem 2rem;
}

Step 2: Add the No-Repeat Rule #

You have two straightforward options here:

Option 1: Update the CSS File (Recommended)

This keeps your code clean and reusable across your theme:

1. Log into your Shopify admin, go to Online Store > Themes
2. Hover over your active theme, click Actions > Edit code
3. In the left sidebar, open the Assets folder and find your main CSS file (usually theme.css, base.css, or a section-specific file like section-hero.css)
4. Locate the CSS class for your repeating image area (like .hero-banner in the example)
5. Add this line to the class:

   background-repeat: no-repeat;
   

   Bonus: To make the image look polished, add background-position: center center; to center it in the container (so it won't get cut off awkwardly). Your final CSS would look like:

   .hero-banner {
     background-size: cover;
     padding: 4rem 2rem;
     background-repeat: no-repeat;
     background-position: center center;
   }
   

6. Save the file, then refresh your store's front page to check the change.

Option 2: Add the Rule Directly to the Inline Style

If you can't find the right CSS class quickly, you can add the rule straight to the div's style attribute in your Liquid template:

<div class="hero-banner" style="background-image: url({{ section.settings.background_image | img_url: 'master' }}); background-repeat: no-repeat; background-position: center;">
  <!-- Your section content here -->
</div>

Step 3: Troubleshoot if Needed #

If the image still repeats, use your browser's developer tools (press F12, then click the element picker icon to select the background area) to check if the background-repeat: no-repeat rule is being applied. Sometimes other CSS might override it—if that's the case, add !important temporarily to test (try to avoid using it long-term if possible):

background-repeat: no-repeat !important;

That's it! This should stop your background image from repeating across the section.

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