User Tools

Site Tools


Fix Mobile parallax effect when setting a background image to the full document

You set an image to fullscreen in your site, and on PC it works great, but on mobile it fucking moves when scrolling… That's because you need to change background-attachment: “fixed” to “scroll” on your mobile media queries.


main {
  background: url(/img/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: auto;
  height: 100%;
@media (max-width: 400px) {
  main {
    background-attachment: scroll;
docu/csheet/sysadm/htmlcss/fix_background.txt · Last modified: 2021/03/03 22:00 by admin