Problem with CSS3-Technique from “Perfect Full Page Background Image”

[steveooo]

Hi,
Chris wrote an article about the perfect full background image:
https://css-tricks.com/perfect-full-page-background-image/

Well, I am using this CSS3 technique:

html {

background: url(images/bg.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

… and it worked pretty well until I found one “bug”:
Sometimes, when I resize the browsers window, there is a 1px-white-border on the left or top, which I captured in this screenshot:
http://cl.ly/0j2u2v1n440K16401K1F

Is there someone, who can solve this problem?

[whiteInkDesign]

Not sure how background-size actually works, but might only happen when the browser window dimensions are an odd number?

[steveooo]

Yes, I also think this could be the reason for this white 1px-border on the left/at the top.

But is there a way of fixing this problem?

[chrisburton]

I never ran into this problem. Have you tried setting a background color that would help rid the white line?

[steveooo]

Well, good idea, but now I can create a blue or black border, which doesn’t fix this problem…

[chrisburton]

Link?

[Author]

Posts