Background Image Scaling While Maintaining Aspect Ratio
With CSS3, you would use background-size property.
background-size: contain; Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
Contain always fits the entire image within your viewport, leaving opaque borders on either the top-bottom or the left-right whenever the ratio of the background image and browser window are not the same.
background-size: cover; Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
Cover always fills the browser window, cutting off some hair or ears in the process, which is what I personally prefer for most cases. You can control how your image is aligned within the viewport by using the background-position property.
You can't, at least not like you are trying to now.
What you can do, however, is create an <img> instead, and with css set position:absolute, scale it to 100% width and crop it from the parent with overflow:hidden
example: http://jsfiddle.net/GHmz7/4/
You could try jquery/js to change the background image:
<!doctype html><html> <head> <title>Width resolution</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { font-size: 20px; font-family: arial,helvetica,sans-serif; font-weight: 700; color:#eee; text-shadow: 0px 0px 1px #999;} div { width:auto; height:340px; border:#ccc groove 2px; padding:5px; } </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('body').css({'background-color':'#ccc'}); var sw = screen.width; function wres() { switch(sw) { case 1920: $('div').css({'background':'#192000 url(bg-1920.jpg)'}); $('body').css({'background':'#001920 url(bg-1920.jpg)'}); break; case 1600: $('div').css({'background':'#160000 url(bg-1600.jpg)'}); $('body').css({'background':'#001600 url(bg-1600.jpg)'}); break; case 1280: $('div').css({'background':'#128000 url(bg-1280.jpg)'}); $('body').css({'background':'#001280 url(bg-1280.jpg)'}); break; case 1152: $('div').css({'background':'#115200 url(bg-1152.jpg)'}); $('body').css({'background':'#001152 url(bg-1152.jpg)'}); break; default: $('div').css({'background':'#102400 url(bg-1024.jpg)'}); $('body').css({'background':'#001024 url(bg-1024.jpg)'}); } //alert(rsw); //$('div').html(rsw); $('.res').append(' '+sw); $('div.res').css('width', 1920); } //alert(sw); wres(); }); </script> </head> <body> <h1 class="res">Resolução atual:</h1> <div class="res">The div</div> </body></html>You can create CSS classes for the backgrounds instead, and use .toggleClass()