Background-image is not showing up

Question

Yesterday I was making an HTML element and this problem hit me up. The Background-image of the DIV is not showing, and I was curious, the link worked fine.

Here is my code

 <div id="floating-image-<?php echo $id; ?>" class="fl-<?php echo $id; ?>" style=" background-image: url(https://images.pexels.com/photos/290470/pexels-photo-290470.jpeg?h=350&auto=compress&cs=tinysrgb); margin-top: 20px; height: 200px; width: 200px; background-position: center center; background-repeat: no-repeat; transform: translateY(0px); background-size: contain; position: relative; margin-right: auto; margin-left: auto; max-width: 80%; display:block; "></div> 

EDIT ok, I edited the dynamic codes and replaced them with some static output. Sorry for misleading Another EDIT I changed the image and now I am using a smaller image, but still it doesn't show up

Answer 1

I have checked, background image is properly working. Your image size is very big, approx 7 MB. Reduce it upto 300KB, too big to show.

Answer 2

Issue is in the image, You have used very high quality image. if you use a low quality image than you have currently used, it will work fine.

Answer 3

The solution is going to be solved only by me since it is included in a project.

Thanks for your help, and if I found the real solution, I will post it here.

EDIT

Well, I feel bad now, about the wasted hour in my life.

Anyway, I found the solution and it was about the animations. I made this feature in my theme, so the user could create animations easily.

The whole story summerizes in few words, " Didn't enable animations in the parent Section, So the normal css code goes as .class{ OPACITY:0; } ".

Sorry! and Thanks for your deep concern in such a problem