CODEWITHSUNDEEP
htmlcss
user2021641
user2021641

Reputation: 109

Rogue white line appearing on background image

html {
    height: 100%;
    overflow: hidden;
    background:url('http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg')no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Hello brethren. I've been trying to get this scalable background image to work on this website, but the facking thing has a weird rogue white line on the left hand side.

http://jsfiddle.net/49n73/1/

Use the fiddle to get an idea of the problem, make sure you pull the 'results' window as large as it can go so you can actually see the rogue line. What is causing this?

Upvotes: 4

Views: 16570

Answers (1)

tw16
tw16

Reputation: 29575

The issue seems to be a scaling bug combined with the background-image being centre aligned.

It can be fixed by changing:

background:url('http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg')no-repeat center center fixed;

to this:

background:url('http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg')no-repeat 0 0 fixed;

So what this does is change the background-position from center center to 0 0. So it will always be scaled from the top left and never leave a gap (the white line) at the side.

Live demo: http://jsfiddle.net/49n73/11/embedded/result/

Upvotes: 6

Related Questions