2

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.

user3718799
  • 55
  • 1
  • 2
  • 7

6 Answers6

7

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

Try to change to position:static only.

Dimas Pante
  • 2,466
  • 22
  • 30
  • I removed background-attachment:fixed and the background-position. The page now looks fine in chrome except that I wanted the image to be fixed so that when you scroll down the bg image doesn't scroll as well. – user3718799 Jul 23 '14 at 04:42
  • But just changing the background-position to 'static', leaving the attachment, doesn't work for you? – Dimas Pante Jul 23 '14 at 13:54
  • Any other suggestions someone? – user3718799 Jul 24 '14 at 02:07
  • 3
    My background image with `background-attachment: fixed` would disappear momentarily when I scrolled. `position:static` fixed it for me. Thanks! (Not `background-position:static` which isn't actually a thing.) – Dennis Best Jan 30 '15 at 06:27
  • Nothing fixed it for me, tried various solutions to no avail. Chrome SUCKS, and I don't know why anyone would use it. For me it's almost as bad as IE. Tested on Chrome for Android v64.0.3282 – Kickass Feb 24 '18 at 21:56
5

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);
Digggid
  • 297
  • 2
  • 10
  • this is still a thing in 2018. this is the best answer; changing to position:static has too many drawbacks and messes up other positioning for children; this affects nothing else. – totallyNotLizards Jul 09 '18 at 12:44
2

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

Joe Bauer
  • 572
  • 1
  • 9
  • 22
  • 2
    I had a similar issue where a parallax background was not showing up. Surprisingly adding the following css rule fixed the issue: `.wpv-parallax-bg-img { overflow-y: scroll !important; }` I haven't noticed any unexpected side effects but this is only reviewed in Chrome and Firefox – Legion Jul 05 '18 at 22:10
2

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

Zoe
  • 27,060
  • 21
  • 118
  • 148
Cristian Oana
  • 1,688
  • 1
  • 11
  • 7
1

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

Unihedron
  • 10,902
  • 13
  • 62
  • 72
SMP Design Media
  • 29
  • 2
  • The css position property affects the content, while background attachment only affect the background image. – Ma Jerez Jul 15 '16 at 15:49
-3

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.

Roberto Caboni
  • 7,252
  • 10
  • 25
  • 39
Arslan Mughal
  • 1
  • 2