# Parallax

**URL:** <https://forum.kirupa.com/t/parallax/642687>\
**Category:** web dev\
**Created:** [May 5, 2020, 1:55pm UTC](https://forum.kirupa.com/t/parallax/642687 "2020-05-05T13:55:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mary\_Pieroszkiewicz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mary_pieroszkiewicz/32/11639_2.png) [@Mary\_Pieroszkiewicz](https://forum.kirupa.com/u/Mary_Pieroszkiewicz)\
**Post date:** [May 5, 2020, 1:55pm UTC](https://forum.kirupa.com/t/parallax/642687/1 "2020-05-05T13:55:49Z")

</div>

I have a truly big problem with parallax effect on my project: [http://marypieroszkiewicz.com/3n\_solution/index.html](http://marypieroszkiewicz.com/3n_solution/index.html)

It doesn’t work well, something wrong with background images / background-position and calculate w CSS/JS.

Truly thank you for help.

Mary

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 5, 2020, 10:59pm UTC](https://forum.kirupa.com/t/parallax/642687/2 "2020-05-05T22:59:34Z")

</div>

Hi Mary - when I scroll the page, the background images do slide at a different speed than the page scroll itself. What isn’t working well for you?

---

<div class="post-metadata">

**Author:** ![Mary\_Pieroszkiewicz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mary_pieroszkiewicz/32/11639_2.png) [@Mary\_Pieroszkiewicz](https://forum.kirupa.com/u/Mary_Pieroszkiewicz)\
**Post date:** [May 10, 2020, 10:18am UTC](https://forum.kirupa.com/t/parallax/642687/4 "2020-05-10T10:18:02Z")

</div>

Hello Kirupa

I used your tutorial in my project. However, I have a problem with images, it cut them, they do not display well, I know that the problem is with offset.Top for images.

Preview here: [http://www.marypieroszkiewicz.com/3n\_solution\_\_project/](http://www.marypieroszkiewicz.com/3n_solution__project/)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 11, 2020, 7:07am UTC](https://forum.kirupa.com/t/parallax/642687/5 "2020-05-11T07:07:26Z")

</div>

Sorry for the delay, Mary. I looked at your code and nothing obvious jumps at me. If the offset is consistently off, have you considered accounting for the extra shift by adding a constant value in your code where the position is being set?

---

<div class="post-metadata">

**Author:** ![Mary\_Pieroszkiewicz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mary_pieroszkiewicz/32/11639_2.png) [@Mary\_Pieroszkiewicz](https://forum.kirupa.com/u/Mary_Pieroszkiewicz)\
**Post date:** [May 16, 2020, 1:38pm UTC](https://forum.kirupa.com/t/parallax/642687/6 "2020-05-16T13:38:39Z")

</div>

Hi Kirupa,

My next question. How to set the initial background offset for these elements [Images] (they move from the beginning of the page… they should only be when the scroll reaches the point where the background is visible)

Thank you for answer
