Template background based on screen resolution?

Hi everyone,
I've been trying to make my website's custom template send a different background to the user based on his own screen resolution. I think sending a 1600x900 image to someone who has a 1024x768 screen is kinda useless and makes the loading time longer while making me spend resources.

I've been tryng getting the screen resolution in a php variable (the width only actually, but that would be enough) using javascript to create a cookie with this info and then refreshing the page, but I didn't manage to code it in the Joomla template. Does anyone know what code would need to be added in which position so that I can tell the user to load a different css (with the body attributes in it)? The only problem I have is to get a PHP variable with the screen's width, because I actually don't know javascript... once I get that, coding the PHP would be easy :3