Firefox rendering of background image

Question

I have a problem when using a cover page on my website. The coverpage, a page consisting of an image covering the whole browser window, is loaded correctly in all browsers but when I scroll down and then up again the image is distorted(only when using firefox). The easiest way to explain is just to show the website: http://arkad.tlth.se . The CSS for the background image is the following:

.site-wrapper-inner {
 display: table-cell;
 vertical-align: top;
 background: url(http://arkad.tlth.se/wp-content/uploads/2014/05/cover-image.jpg) no-repeat center fixed transparent;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

If you want more information on the code, please inspect element. I tried using this instead which worked but now the scrolling effect is gone. The effect that the background image is scrolled over by the other content. I tried to combine the two which makes the whole screen become blanc. Is there something I'm missing?

background: url("http://lewisking.net/images/header-image.jpg") no-repeat scroll 0px 100% / cover transparent;

Answer 1

I am able to confirm that the problem appears in Firefox. The background image displays correctly in Chrome.

The problem in Firefox disappears if you change display: table-cell to display: block .

I suspect that Firefox's table cell height computation engine is causing the problem.

I would try some other display mode other than table-cell.

I tried using display: table with height: 100% and width: 100% , which is close to what you need. Some trial and error may be required.

I was able to reproduce the problem as shown below (table cells show the drawing problem).

 html, body { margin: 0; } div { background: url(http://placekitten.com/2000/2000) no-repeat center fixed transparent; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 400px; } div.bg-cell { border: 2px dashed red; display: table-cell; height: 400px; width: 1000px; /* the width is for demo only... */ } div.bg-block { border: 2px dashed blue; display: table; /* block also works... */ } 

 <div class="bg-cell"></div> <div class="bg-block"></div> 

Answer 2

Try this:

.site-wrapper {
 display: block;
 vertical-align: top;
 background: url(http://arkad.tlth.se/wp-content/uploads/2014/05/cover-image.jpg) no-repeat center fixed transparent;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

And remove the '.site-wrapper-inner' rule.