Clever Geek Handbook

Why is my image not loading in Firefox browser but loading on safari / chrome?

I was wondering why my image is not loading in Firefox browser but loading on safari / chrome?

.shape {
      border-radius: 25px;
      background: #4D5061;
      content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
      color: white;
      height: 300px;
      margin: auto;
      padding: 3px;
      width: 300px;
      top: 15%;
      left: 50%;
      position: absolute;
      margin-left: -150px;
      z-index: 10;
      }
      

        
        
        
      

    
<div class="shape"></div>
Run codeHide result


+3


source to share


5 answers


Try it background-image

. Like the Mozilla support page

The CSS content property is used with pseudo-elements ::before

and ::after

to create content in an element.



.shape {
      border-radius: 25px;
      background: #4D5061;
      background-image: url('http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg');
      color: white;
      height: 300px;
      margin: auto;
      padding: 3px;
      width: 300px;
      top: 15%;
      left: 50%;
      position: absolute;
      margin-left: -150px;
      z-index: 10;
      }
      

        
        
        
      

    
<div class="shape"></div>
Run codeHide result


+1


source


Change your CSS to this. Don't use content

for a background image because there is a much easier way to do it. Try using background shrinking instead (you can also just use background-image

).



.shape {
      border-radius: 25px;
      background: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg) center no-repeat #4D5061;
      color: white;
      height: 300px;
      margin: auto;
      padding: 3px;
      width: 300px;
      top: 15%;
      left: 50%;
      position: absolute;
      margin-left: -150px;
      z-index: 10;
}
      

        
        
        
      

    
<div class="shape"></div>
Run codeHide result


+1


source


Historically, the property content

was only defined for pseudo-elements . The current Firefox implementation only supports this use case.

For example,

.foo::before {
  content: 'hi';
}

will work. Using real elements as in the question,

.foo {
  content: 'hi';
}

does not currently work in Firefox.

+1


source


Actually, by doing this:

.shape, .shape:after {
   content: url('path');
}

Works for Chrome, Firefox and Safari.

First of all, you need to take care of removing the attribute alt

from img

or you will see the value alt

and actual image in Firefox browser.

+1


source


try it

.shape :: before {content: url ("link");}

0


source






More articles:


All Articles