Hide background image on mobile device

[buzzvick]

Hi all

I have a responsive site and I have a background image in my services page(s)

eg

http://nicholsonssolicitors.davidcurran.com.au/about/services/Commercial

All looks fine on desktops and laptops, but when view on a mobile phone, the image displays behind the page content which doesn't look very nice. Is there a way to hide this background image on mobile devices only? i tried this below in my screen.css file, but no luck.

@media (max-width : 480px) {

    body.custom-background {

        background-image: none;

    }

Or another workaround perhaps?......

Thanks

DC