I'm coding a site that contains 3 wide images which need to have 100% width at all times. I'm using media queries and I would rather not have to make 3+ copies of each image to make them fit.This is the CSS I want on the images:\[code\]#artwork1 { width: 1500px; height:500px; background-image: url(../img/menupic_1.png); background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }\[/code\]Here is a jsFiddle link: http://jsfiddle.net/RtPEA/. The link just contains the three \[code\]<div>\[/code\]s that need a background that resizes.I have used \[code\]background-size:cover;\[/code\] on a lot of sites, but in Firefox, it doesn't seem to work on this one.I have also tried various jQuery plugins. While I did find some that had some success, they did not work on iOS.