Background-size:cover, 1px whitespace to the left

Question

I have a small problem on my site about background-size:cover I have been testing it in Firefox all along, but when i load the page in Google Chrome, i get 1px white all to the left. When i use background-position:-1px the white edge left goes away (but then i get it to the right). Is there any way to fix this, and still keep the cover?

I applied this to my body: background:url("images/baggrund.jpg") no-repeat center center fixed; background-size: cover

I can not link to the site at the moment, but hope i described it clear enough.

Thanks in advance

Edit: added a screenshot, top comes from firefox, bottom from Chrome.

Answer 1

Try this:

background: background:url("images/baggrund.jpg") no-repeat 49% center fixed;
background-size: cover;

In chrome, when you use "background-size: cover", if the xpos of background-image is no less than 50%, you will meet that problem.

So, the xpos is set to 49% (or 49.9% to reduce the error) instead of "center" will fix that problem.

My English is not good, i hope you know what i mean.

Answer 2

Changed background-size: cover; to background-size: 100%;. Worked for me!

Answer 3

That did not work for me, because i used background cover, but i just added a chrome specific line to set my background-size to 101%, that seems to fix it (for the eye). Thanks for the input.

Answer 4

101% might work fine but you could also try this fine-grained solution:

background-size: calc(100% + 1px);

Answer 5

You could apply the background property to the body tag, which would cause it to cover the whole page.

You could also try applying the following style to the body and html tags:

html,body{
  padding:0;
  margin:0;
}