In custom liquid section the css backgroun:url() can not load.png picture

Store Design
1

In my shopify store I add one custom liquid section and add some customer html like this:

<div class="hero">
  
  <div class="parallax-layer layer-6"></div>
  <div class="parallax-layer layer-5"></div>
  <div class="parallax-layer layer-4"></div>
  <div class="parallax-layer bike-1"></div>
  <div class="parallax-layer bike-2"></div>
  <div class="parallax-layer layer-3"></div>
  <div class="parallax-layer layer-2"></div>
  <div class="parallax-layer layer-1"></div>
  <div class="logo">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/logo.svg" alt=""  />
  </div>
</div>

I want to make an animation by use backgound image, so I put some css code like this in base.css

.hero {
    width: 100%;
    min-height: 450px;
    position: relative;
    top: 0;
    left: 0;
    background-color: #d9edfd;
}

.layer-1 {
    -webkit-animation: parallax_fg linear 20s infinite both;
    animation: parallax_fg linear 20s infinite both;
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 136px;
}

.layer-2 {
    -webkit-animation: parallax_fg linear 30s infinite both;
    animation: parallax_fg linear 30s infinite both;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/2.png) 0 100% repeat-x;
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 145px;
}

.layer-3 {
    -webkit-animation: parallax_fg linear 55s infinite both;
    animation: parallax_fg linear 55s infinite both;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/3.png) 0 100% repeat-x;
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 158px;
}

.layer-4 {
    -webkit-animation: parallax_fg linear 75s infinite both;
    animation: parallax_fg linear 75s infinite both;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/4.png) 0 100% repeat-x;
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 468px;
}

.layer-5 {
    -webkit-animation: parallax_fg linear 95s infinite both;
    animation: parallax_fg linear 95s infinite both;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/5.png) 0 100% repeat-x;
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 311px;
}

.layer-6 {
    -webkit-animation: parallax_fg linear 120s infinite both;
    animation: parallax_fg linear 120s infinite both;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/6.png) 0 100% repeat-x;
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 222px;
}

.bike-1,
.bike-2 {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/bike.png) 0 100% no-repeat;
    z-index: 1;
    position: absolute;
    bottom: 100px;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 75px;
}

.bike-1 {
    -webkit-animation: parallax_bike linear 10s infinite both;
    animation: parallax_bike linear 10s infinite both;
}

.bike-2 {
    -webkit-animation: parallax_bike linear 15s infinite both;
    animation: parallax_bike linear 15s infinite both;
}

@-webkit-keyframes parallax_fg {
    0% {
        background-position: 2765px 100%;
    }
    100% {
        background-position: 550px 100%;
    }
}

@keyframes parallax_fg {
    0% {
        background-position: 2765px 100%;
    }
    100% {
        background-position: 550px 100%;
    }
}

@-webkit-keyframes parallax_bike {
    0% {
        background-position: -300px 100%;
    }
    100% {
        background-position: 2000px 100%;
    }
}

@keyframes parallax_bike {
    0% {
        background-position: -300px 100%;
    }
    100% {
        background-position: 2000px 100%;
    }
}

.logo {
    margin: 70px auto;
    position: absolute;
    z-index: 2;
    width: 100%;
}

.logo img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

The problem is, all the .png picture can not load ans show from background: url (xxx.png), I try to upload all png in to asset folder and use backgound: url({{‘xxx.png | asset_url’}}); still, it doesn’t show in frontpage.

Any one who can please help me, it is really for me, my website I will use many backgound-image in my future design. thanks.

My website url: https://rymic-infinity.myshopify.com/

2

Could it be the “”" is missing?

background: no-repeat url("../../media/examples/lizard.png");

https://developer.mozilla.org/en-US/docs/Web/CSS/background

3

Hey, Jay

Thanks for your help, I add “”

You can see the attached my screen shot.

Still, the backgound image doesn’t show

It is very wired.

Leo

still.png
still.png1488×769 66.8 KB

4

HI, problem solved, that because shopify default hidden all empty div, just add empty div display:block; then all the backgound-image can appear in front.