css background image responsive

html {
   min-height: 100%;
   background-image: url(image.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

.container {
  width: 50%;
  height: 200px;
  overflow: hidden;
}

.container img {
  max-width: 100%;
  height: auto;
  display: block;
}

Responsive Web Design - Images
Resize the browser window to see how the image scales to fit the page.

Using The width Property
If the width property is set to a percentage and the height is set to "auto", the image will be responsive and scale up and down:

Example
img {
  width: 100%;
  height: auto;
}
Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

Using The max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

Example
img {
  max-width: 100%;
  height: auto;
}
Add an Image to The Example Web Page
Example
img {
  width: 100%;
  height: auto;
}