CODEWITHSUNDEEP
htmlcss
user7451161
user7451161

Reputation:

Background-image is not showing up

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

Upvotes: 0

Views: 116

Answers (3)

user7451161
user7451161

Reputation:

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

Upvotes: 0

Piyali
Piyali

Reputation: 506

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.

Upvotes: 1

ashanrupasinghe
ashanrupasinghe

Reputation: 756

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.

Upvotes: 0

Related Questions