My Background image is not working/appearing

November 15, 2022

So I have a banner section wherein I want an image to be the background of the banner. I have tried multiple solutions, read trough other people having similar issues and none of them worked for me… im trying to set the background image on the section BFinner-Event. I am using shopify and have uploaded the image to the assets folder. I have also tried linking the background-image url to (assets/banner.png) but that also didnt work.

Here is my code:

<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>