CODEWITHSUNDEEP
htmlcssimagefirefoxcover
user2359168
user2359168

Reputation:

Firefox rendering of background image

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;

Upvotes: 1

Views: 1204

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

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>

Upvotes: 1

Scott Simpson
Scott Simpson

Reputation: 3850

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.

Upvotes: 0

Related Questions