Menu
here is my site https://charles-keally.myshopify.com/ Its been a whole day fixing the parallax image. The last image show parallax in chrome but not in mozilla. Please somebody help me. I'm using debut theme. All I did is just add background-attachment:fixed; in hero.liquid Anyone please help me Thanks
815
The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property. Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.
Set a background image using the HTML body elementAdd the bgproperties="fixed" code into the body element, as shown below. Next, add the background="location" attribute to the body tag, where location is the relative or absolute URL of the image. In the above example, background="bg.
If you disable this on the .page-container class:
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
It should be better.
82
There have been bugs in the past with transformations in Firefox. After some quick searching, it looks like on your .page-container class contains some transformations that when disabled appear to solve your problem.
.page-container {
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
