Different CSS for each platform

How i can put this css for a desktop version?

#latest-news, #full-width, #about, #projects, #services {background-repeat: no-repeat!important; background-attachment: fixed!important;}
@media all and (max-width: 667px!important)

And this for a mobile version?

#latest-news, #full-width, #about, #projects, #services {background-repeat: no-repeat!important; background-attachment: scroll!important;}
@media all and (max-width: 667px!important)

When the background is defined like FIXED, this not appear in mobile browser. Now, I wanna to define FIXED to desktop and SCROLL for mobile version.

http://rogermansur.com.br

Hey there

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*fixed backgrounds */
#latest-news, #full-width, #about, #projects, #services{
  background-repeat: no-repeat!important; background-attachment: fixed!important;
}
#latest-news, #full-width, #about, #projects, #services{
  background-repeat: no-repeat!important; background-attachment: scroll!important;
}


Best Regards,
Support

But how can I set FIXED to desktop and SCROLL to mobile?