CODEWITHSUNDEEP
cssgoogle-chrome
user3718799
user3718799

Reputation: 55

background-attachment fixed not working in chrome

I tried google for help on this and it seems to be a bug in chrome but I still can't find a solution. I have taken a look at many stackoverflow questions similar to this but those solutions still didn't help.

When I try to scroll down on the page the background-image flickers and messes up. I am using Google Chrome Version 35.0.1916.153 on Ubuntu Desktop

CSS code:

#left-container {
background-image: url('http://easource.com/wp-content/uploads/2014/07/traphouse4.jpg');
background-attachment: fixed;
background-position: -1% 0%;
background-repeat: repeat-y;
cursor: pointer;
}

You can see how it looks on http://easource.com

Also, I tried removing the background-position but still doesn't work.

Upvotes: 2

Views: 35168

Answers (6)

Arslan Mughal
Arslan Mughal

Reputation: 1

You must have to use these properties to make the image fixed:

background-image: URL("your image path");

and I'm 100% sure that it will work for you in every browser.

Upvotes: -3

Cristian Oana
Cristian Oana

Reputation: 1718

Try adding backface-visibility: hidden;. Worked for me.

Upvotes: 2

Digggid
Digggid

Reputation: 307

You can keep your position as is and add the transform property to your background image element.

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

Upvotes: 5

Dimas Pante
Dimas Pante

Reputation: 2521

As seen here: Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

Try to change to position:static only.

Upvotes: 7

Joe Bauer
Joe Bauer

Reputation: 622

Removing overflow-y: scroll; from body solved the issue for me.

Upvotes: 2

SMP Design Media
SMP Design Media

Reputation: 29

It's working fine with using position:static;
if it doesn't work, remove the position property.

Upvotes: 1

Related Questions