0

I am having an issue getting a background url to render in Firefox for my website whilst it works fine in Safari and Chrome.

I have looked through several of the stack posts on this subject namely post1 and post2 and none of the initiatives in these posts have worked thus far.

my html 

<div class="jumbotron">

    <div style="" class="animated fadeInDown">
        <div class="container">
            <div class="col-md-12">

                <h1>Curing H-pylori <br class="visible-lg "/>Parasite and Gastrointestinal Infections</h1>
                <hr style="width:25%;text-align:left;margin:30px 0; border:2.5px solid #fff;"/>
            </div>
            <div class="col-md-8">
                <h2 class="subtitle">Take the step to recovery.</h2>
            </div>

        </div>
    </div>
</div>

my css

.jumbotron {
    width: 100%;
    min-height: 450px;
    background: url('https://s122939.gridserver.com/clients/conversant/images/driving.jpg') center center;
    background-size: cover;
    opacity: 1;
    display: table;
    position: relative;
    border-radius: 0;
    color: white;
    text-transform: uppercase;
    margin: 0;
    polygon(0 0%, 100% 0, 100% 100%, 0% 85%);
    clip-path: url(#poly);
    overflow: hidden;

}

I have also tried a host of other things to get the image to render without success before asking for help here.

  1. Deleted my Firefox cached data
  2. Changed my css to display: block;
  3. Checked to ensure that their is no add on blocking in Firefox.
  4. Used background: fixed;
  5. Used jumbotron::before
  6. Tried content: url

Any steering or help would be appreciated.

weng tee
  • 372
  • 1
  • 3
  • 16
  • 1) can you try to post a fiddle? 2) your browser makes a request to the image file in order to load it, check in firefox dev tool if the file is being loaded at all – Roysh Apr 01 '18 at 13:57
  • try to remove `center center` and use background-image instead of background .. also what is polygon alone like that ? it should be used withon clip-path – Temani Afif Apr 01 '18 at 14:00
  • your code seems to work here - https://jsfiddle.net/Lah45n5k/ – Roysh Apr 01 '18 at 14:01
  • 1
    ok i see, the issue is with clip path ... for chrome you are using the clip path correctly with webkit .. but firefox will use the standard one which is not working ... change `clip-path: url(#poly);` by `clip-path: polygon( ... );` – Temani Afif Apr 01 '18 at 14:03
  • @TemaniAfif how do you mean – weng tee Apr 01 '18 at 14:05
  • Add jumbotron::after with the content: url instead of before for your css for the image to render in firefox. – Josh Adams Apr 01 '18 at 14:05
  • 1
    Ahhhh I see, thank you very much @TemaniAfif really appreciate that. that worked and it now renders – weng tee Apr 01 '18 at 14:06
  • thanks for the steering the rest of the guys, – weng tee Apr 01 '18 at 14:10
  • Can this question be closed now? If the problem was caused by a simple error in the CSS, it won't be of much use to others, especially since the question itself doesn't contain all the CSS needed to reproduce the problem accurately. – Mr Lister Apr 02 '18 at 11:00
  • yes............ – weng tee Apr 02 '18 at 13:26

0 Answers0