How can I make a background image scalebale

Question

I have a banner div:

<div class="background" style="background: url(<%= @banner.image.url(:big) %>) no-repeat"></div>

and corresponding css:

#banner {
  width: 100%;
  height: 275px;
}

#banner .background {
  width: 100%;
  height: 275px;
  background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
}

uploader.rb:

version :big do
  process resize_to_fill: [1920, 280]
end

On smaller devices, the background-image is cropped, here are the screenshots. Full width:

And a resized window:

Is there any way to make the image be resizable when the screen width becomes narrow? Thanks.

Answer 1

Just use background-size: contain for this

#banner .background {
    background-size: contain; 
}

Answer 2

try background-size: 100% auto;