4

I have my background image from background-url and my parallax works for the image when I put: background-attachment: fixed;

How can I make it so that the background image moves a little bit when I scroll?

Here is the examples I'm talking about:

This is what I have now when I scroll: http://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

This is what I want when I scroll: http://materializecss.com/parallax-demo.html

Sumon Sarker
  • 2,707
  • 1
  • 23
  • 36
pixie123
  • 929
  • 3
  • 14
  • 27

2 Answers2

4

Maybe this link will help it uses Javascript to move the background image

EDIT

I just realized this only works because the background image is a repeating pattern. If you want to do this effect with a normal image you can use Parallax.js.

Community
  • 1
  • 1
Nathan O
  • 72
  • 9
0

You can use a combination of CSS3's transform and transition properties to make the background image animate. Here is a link to how to do that. You can use Javascript's onscroll event to trigger what i have triggered on hover.

Overload94
  • 1
  • 1