How to make background image repsonsive

I would do this using just the CSS, similar to what hankknight has done.

I would modify it slightly to use different images at different screen sizes. This would keep the download size smaller for people on mobile devices.

@media all and (max-width: 480px) {body 
        {
	background-image: url(../images/MY-SmallImage.png) 
        background-size: cover;
         }
}

@media all and (min-width: 481px) and (max-width: 768px)  {body
        {
	background-image: url(../images/MY-MediumImage.png) 
        background-size: cover;
         }
}
@media all and (min-width: 769px) {body 
        {
	background-image: url(../images/MY-LargeImage.png) 
        background-size: cover;
         }
}

Select all Open in new window

This gives you a different images to download depending on screen size.
Set the image size to whatever works best for the image you are using. hankknight's link to w3c explains the different background size options.

I like the approach provided by itkadmin better than the approach I posted because it gives you the ability to use a smaller image for smaller devices which saves bandwidth and improves performance.