我的背景图片不工作/出现[关闭]答案

【问题标题】：My Background image is not working/appearing [closed]我的背景图片不工作/出现[关闭]
【发布时间】：2022-11-19 12:12:11
【问题描述】：

所以我有一个横幅部分，我想要一个图像作为横幅的背景。我尝试了多种解决方案，阅读了其他有类似问题的人，但没有一个对我有用……我正在尝试在 BFinner-Event 部分设置背景图像。我正在使用 shopify 并将图像上传到资产文件夹。我也尝试过将背景图像 url 链接到 (assets/banner.png)，但这也没有用。

这是我的代码：

<section class="BFinner-Event"> 
    <div class="BFimgContainer"> 
    {% if section.settings.image != blank %}
       <img src="{{ section.settings.image | img_url: '300x300'}}" alt="img" class="BFimgContainerimg"> 
       {% else %}
        {% capture current %}{% cycle 1,2 %}{% endcapture %}
        {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg'}}
    {% endif %}
    </div>
  <input type="text" value="15Off" id="BFdiscountCode" style="display: none;">
  <button class="BFButton" onclick="copyDiscount()">{{section.settings.BFButtonText}}</button>

    <div class="BFtwoContainer">
        <div class="BFthreeContainer">
            <div class="BFfourContainer">
                <h1 class="BFconTitle">{{section.settings.title}}</h1>
                <div style="color: white;"> {{section.settings.description}} </div>
                <a href="{{section.settings.button_link}}" class="#">{{section.settings.button_label}}</a>
            </div>
            
        </div>
  </div>

</section>
<span class="copySpan" id="copied"></span>
<style>
  
    .BFinner-Event {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30vh !important;
/*     background-color: #f2f2f2; */
    height: 15vh;
/*     background: black; */
/*     background-image: url ({{ 'banner.png' | asset_img_url: 'original' }});
    background-size: cover; */
    background-image: url ('banner.png');
      
  }


    @media only screen and (min-width: 1480px) {
      .BFtwoContainer {
      max-width: 60%;
    }
    }

      @media only screen and (max-width: 1479px) {
      .BFtwoContainer {
      max-width: 70%;
    }
    }

        @media only screen and (max-width: 1220px) {
      .BFtwoContainer {
      max-width: 60%;
    }
    }

  .BFconTitle {
    margin: 0;
    color: white;
/*     display: flex;
    justify-content: center; */
  }

  .BFimgContainer {
    height: 175%;
    transform: scale(1.25);
  }

  .BFimgContainerimg {
    height: 100%;
  }
  
    @media only screen and (min-width: 1040px) and (max-width: 1480px) {
    .BFinner-Event {
      height: 20vh;
    }
  }  
      @media only screen and (max-width: 640px) {
    .BFinner-Event {
      height: 25vh;
      display: flex;
      flex-direction: column;
    }
      @media only screen and (max-width: 320px) {
    .BFinner-Event {
      height: 22vh;
    }
    }

              @media only screen and (max-width: 640px) {
        .BFButton {
          transform: translateY(-45%) !important;
        }
      }
      @media only screen and (min-width: 250px) and (max-width: 759px) {
    .BFtwoContainer {
      max-width: 90%;
      margin: 0 10vw 0vh 10vw;
    }
  }
       @media only screen and (max-width: 680px) {
     .BFtwoContainer {
       margin: 0 10% 0 0;
     }
   }

      @media only screen and (max-width: 640px) {
     .BFtwoContainer {
       top: -5vh;
       position: relative;
       margin: 0 5% 0 5%;
       transform: translateY(20%);
     }
   }

      @media only screen and (max-width: 640px) {
     .BFconTitle {
       display: flex;
       justify-content: center;
     }
   }
  
   @media only screen and (max-width: 680px) and (min-width: 148px){
     .BFimgContainer {
       position: relative;
     }
    }

   }
    @media only screen and (max-width: 640px){
    .BFimgContainer {
      height: 70%;
      top: -5vh;
  } 
   }
        
</style>

【问题讨论】：

尝试删除 background-image 属性上 url 和括号之间的空格。
@Coolis 我已经尝试过并且必须说，你是我的阳光。成功了，谢谢。

标签： html css shopify liquid fluid-layout

【解决方案1】：

这里的问题是 url 和左括号之间的空格背景图片财产。

代替：

background-image: url ('banner.png');

与（删除空间）：

background-image: url('banner.png');

如果你删除空间它应该工作得很好。希望有所帮助。

【讨论】：

【解决方案2】：

添加背景的简单方法是：

.yourClass{
    background: url("https://tpc.googlesyndication.com/simgad/3248856506927570682");
    background-repeat: no-repeat;
    background-size: cover;
}

将 URL 替换为您自己的图像，并确保图像的 URL 正确并加载到新窗口中。其他属性只是暂时的，您可以根据需要替换所有属性。

【讨论】：