Background Attachment For Desktop Only

[nhorstmann]

Hey,

at www.analogcanvas.com I changed the background-attachment to fixed (the parallax amount just wasn’t enough for the effect we wanted). This gives us the desired effect on desktop sites, but it messes up mobile (we like how the parallax looks natively on mobile).

I added

.x-bg-layer-lower-image{
background-attachment:fixed;
}

to the global css.

Is there a way to have the background-attachment be fixed for only desktop clients without affecting mobile (or being able to control the parallax effect amount on desktop)?

[lely]

Hi There,

For that specific CSS to work on desktop only, please add it inside media query:

@media (min-width: 481px){ /*Feel free to adjust 481*/
      .x-bg-layer-lower-image{
        background-attachment:fixed;
     }
}

Note that specific CSS is too general and it will affect all background sitewide. If this scenario is case to case only, you might want to add class like this:

@media (min-width: 481px){ /*Feel free to adjust 481*/
      .custom-bg .x-bg-layer-lower-image{
        background-attachment:fixed;
     }
}

Then add custom-bg on specific section/row class field where you want this to take effect. For more guidance regarding media query, see this.

Hope this helps.