My Background image is not working/appearing-CodePudding

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 > 
    <div > 
    {% if section.settings.image != blank %}
       <img src="{{ section.settings.image | img_url: '300x300'}}" alt="img" > 
       {% 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  onclick="copyDiscount()">{{section.settings.BFButtonText}}</button>

    <div >
        <div >
            <div >
                <h1 >{{section.settings.title}}</h1>
                <div style="color: white;"> {{section.settings.description}} </div>
                <a href="{{section.settings.button_link}}" >{{section.settings.button_label}}</a>
            </div>
            
        </div>
  </div>

</section>
<span  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>

CodePudding user response：

The problem here is the space between the url and the opening parenthesis on the background-image property.

Replace:

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

With (removed space):

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

If you remove the space it should be working just fine. Hope that helps.

CodePudding user response：

Simple way to add background is:

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

Replace URL with your own image and make sure URL of image is correct one and loading on new window. Other property are just temporary, you can replace all with your requirements.