Background image not showing on firefox and chrome

Question

I have an issue whereby a background image is not showing up on chrome and firefox; Its a background image for a a div that is full width. Any help is appreciated :) please see my codes below:

#judges {
 width: 960px;
 margin: 0 auto;
 padding-top: 80px;
}

#judges .col1 p, #judges .col2 p {
 font-family: 'SohoGothicPro-regular', verdana, sans-serif;
 text-align: center;

}

#judges .col1 p, #judges .col2 p, #judges .col1 h3, #judges .col1 h3 {
 color: white;
} 

#judges_bg {
 clear: both;
 background-image: url('img/faces.png');
    position: absolute;
    width: 100vw;
    left: calc(-50vw + 50%);
    height: 380px;
    overflow: hidden;
}


#judges .readmore a {
 color: white;
}

    <div id="judges_bg" class="grey_overley">
     <div id="judges"><!-- JUDGES START -->
   
   <div class="col1" style="color: white; text-shadow: 0 0 70px rgba(1,2,2,.99); font-family: 'SohoGothicPro-bold', verdana, sans-serif;">
    <div  class="wow slideInLeft" data-wow-duration="2s"  data-wow-offset="100"><p>The distinguished, international panel of judges is comprised of engineers and scientists representing the diversity of the profession. Lord Alec Broers is Chairman of the 2015 Judging Panel.</p></div>
   </div>
   
   <div class="col2">
   <div  class="wow slideInRight" data-wow-duration="2s" data-wow-offset="100">
       <h3 style="color: white; text-shadow: 0 0 70px rgba(1,2,2,.99);">Who are the<br> <span>Judges?</span></h3></div>
      </div>
   
   

   
     </div><!-- JUDGES END -->
     <div class="read_more"><a href="#" style="color: white;">Meet the Judges</a></div>
    </div>

Can you see whether height is set or not? IF not try explicitly setting height. — Rohith K, Feb 03 '15 at 14:07

Refilon · Accepted Answer · 2015-02-03T14:50:35.097

0

It's probably this line that's not good:

background-image: url('img/faces.png');

Change it to:

background-image: url('../img/faces.png');

I know the problem. img/faces.png does not exists! You're using WordPress and you have to upload the image you want to use. Go to the image and click on it and you will see the full path name to the image. Copy that, and paste it in the url tag like this: url('COPY_LINK_HERE'). That has to fix it.

edited Feb 03 '15 at 14:50

answered Feb 03 '15 at 14:15

Refilon

3,334
1
27
51

I agree with @Dennis - it's more likely to be an error in your image filepath than anything else. I've just tried your HTML & CSS in Firefox 35 (using one of my own fullscreen images) and your markup works perfectly. – Rounin Feb 03 '15 at 14:20
Sorry dennis Just tried re-exporting the image from photoshop and uploading it to tiny pic worked like a charm! the odd thing was that even though safari was able to show the image chrome wasn't since it seemed to be a .psd renamed to .png. Really sorry! feel quite stupid now but thanks a lot – Lukas_T Feb 03 '15 at 15:03

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

width: 100vw;
left: calc(-50vw + 50%);

vw is an incorrect unit !

see this thread : Is there any cross-browser javascript for making vh and vw units work

edited May 23 '17 at 11:57

Community

1
1

answered Feb 03 '15 at 14:54

Cassian

3,648
1
29
40

Why make two answers? – Refilon Feb 03 '15 at 14:59
@Dennis I marked for delete the second (seems like the problem is not the path) – Cassian Feb 03 '15 at 15:04

Background image not showing on firefox and chrome

2 Answers2