Coming a bit late to the party but from project page of the Style (CSS) Settings module:
Configure CSS values from the UI for any module, theme or custom CSS
just by wrapping CSS values in a code comment. The CSS is functional
even without the module being installed (soft-dependency). Form API
elements are provided to have a color picker or a slider (e.g. for
opacity).

Apart from the form API elements offered by the module, to have predefined field values you can use the Drupal core form API fields select or checkboxes.
For a site's custom CSS, rename the existing dedicated file 'sites/all/modules/style_settings/css/example.custom.css' to 'custom.css'. This file gets scanned for CSS values wrapped in comments and will be rewritten if so. In any case, it gets loaded as last stylesheet so you can be sure your custom CSS will not get overridden by module or theme CSS. Neither it will be overwritten when you upgrade the module.
You still have to define the form yourself by writing some code but the module takes care of rewriting the desired values in your CSS. Furthermore it offers form API elements especially for CSS property values (including validation) so that task is made as easy as possible.
The module has a demo and documentation.
max-width: 100%; height: auto;
would be a perfectly valid way to solve that. The full sized image is going to be loaded regardless of the device or method, so there's no benefit to using a background image. Not that that answers your question, just saying...