Hassan Baig Hassan Baig - 1 year ago 99
CSS Question

Parallax scrolling with infinite repeated background in website

I have a small square graphic which, when repeated, presents a visually pleasing wallpaper. Setting it as a repeating

background-image
is straightforward.

But is there a way that this infinitely repeating
background-image
stays static, whereas scrolling my website causes just the foreground to scroll?

Would prefer pure CSS solutions, or ones with minimal JS (if absolutely required).

Answer Source

Setting background-attachment: fixed will set the background image position as fixed. Does this work for you?

body {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Crystal_Clear_action_bookmark_Silver.svg/128px-Crystal_Clear_action_bookmark_Silver.svg.png');
  background-attachment: fixed;
}

p {
  margin-bottom: 300px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum congue erat vitae commodo. Proin a est vitae risus feugiat malesuada eu scelerisque turpis. Nullam purus ante, vulputate ac tristique in, maximus in lectus. Cras interdum sed sapien
  in scelerisque. Proin finibus non ligula non venenatis. Nullam blandit, urna mattis sodales mollis, magna libero interdum neque, vitae semper lacus mauris quis mi. Etiam finibus ultricies blandit. Donec justo risus, venenatis sed aliquam in, ullamcorper
  nec velit. Proin vitae arcu enim.</p>

<p>Pellentesque porta orci sit amet urna pharetra tristique. Duis iaculis quam eget auctor dictum. Proin sit amet purus id orci sollicitudin aliquam sit amet sit amet lorem. Donec egestas, arcu id volutpat suscipit, felis ex rhoncus nibh, in lacinia sem
  magna lobortis tortor. Sed at nibh dolor. Donec sed tellus sit amet libero volutpat tempor. Maecenas sodales nibh dui, sit amet mollis tellus blandit varius. Nunc eu mollis nisl. Aliquam non nisl felis. Donec vehicula, ipsum id laoreet mollis, dui mi
  dapibus urna, ut sodales lacus metus malesuada elit. Sed fermentum euismod condimentum. Ut vel pretium lorem, id convallis arcu. Fusce dictum felis vitae quam lobortis, ac venenatis lectus elementum. Phasellus est erat, venenatis sed ligula nec, viverra
  pellentesque nisl. Nullam quam enim, ullamcorper nec malesuada vel, elementum id mi. Aliquam quam arcu, lobortis sed mi vel, pharetra euismod tellus.</p>

<p>Donec eu justo feugiat, imperdiet mauris in, dictum nulla. Donec metus diam, pharetra a accumsan at, ultricies ac nibh. Mauris egestas aliquam enim, eget dapibus nisi eleifend sed. Suspendisse velit sem, fringilla vitae nulla ac, tincidunt blandit tellus.
  Donec vitae ex quam. Nullam vehicula lacus lobortis libero egestas, sed mollis quam pretium. Vivamus turpis lorem, tempus at felis et, porta sagittis nulla. Nullam non purus vel tellus blandit vehicula non non felis. Nullam ut lobortis nisl.</p>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download