title: Displaying custom background images based on screen resolution
body: <p>For a site, I need to be able to dynamically display background images depending on the user's screen resolution.</p>
  
  <p>I.e when the page starts loading, within the <code>&lt;head&gt;</code> a small javascript loads, which sets the page's background via css to something like <code>http://example.com/backgrounds/beach_800x600</code> where 800 and 600 is the screen resolution determined via the javascript.</p>
  
  <p>I'm creating various resized images for the most common screen resolutions, so that for most people there will be an exact match of their screen resolution with an existing image. If there's not an exact match made, e.g if a user has a screen resolution <code>AxB</code> for which there's no existing image, then an image will be created &amp; resized to <code>AxB</code> on the fly, and will be served. From then on, anyone with the resolution <code>AxB</code> would be served that image.</p>
  
  <p>The questions I have are:</p>
  
  <p>1) Is this a safe method? I.e I don't want more than 50 custom sized images created for custom screen resolutions. Would I be able to stay in that ball park with this method? And are there any other security risks I should be aware of with this method?</p>
  
  <p>2) Should I give it an error margin of say 50 or 100 pixels, so if someone's resolution is 700x900, and I don't have that but I have 600x800 or I have 800x1000, then I would serve those existing images rather than create new ones? If so, should I set the margin at 100 pixels or is there a better number?</p>