min height of the background size

Question

How can I set the minimum height of the background-size?
I have a background image on the css and I gave it background-size:100% but when I resize the browser to lower width I would like the height to stop at some point

.wrapper { width: 90%; margin:0 auto; } 
.slider { 
    background-image:url(image.jpg);
    background-size:100%;
    background-repeat:no-repeat;
    min-height:200px;  
}

Example: http://jsfiddle.net/3yonr0wa/

Answer 1

Try background-size:cover; in your code instad of 100%

DEMO

CSS:

.slider {
    background-image:url(http://derailed.progressionstudios.com/wp-content/uploads/2014/02/shutterstock_120154516-2000x700.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    min-height:200px;
}

EDIT : Updated Demo

CSS:

.slider {
    background-image:url(http://derailed.progressionstudios.com/wp-content/uploads/2014/02/shutterstock_120154516-2000x700.jpg);
    background-size:cover;
    background-repeat:no-repeat;
   min-height:200px;  
  margin: 0 auto;
  max-height: 600px;
  max-width: 1000px;
}
.slider:before {
  content: "";
  display: block;
  padding-bottom: 50%;
}

Answer 2

https://jsfiddle.net/itaymer/t8tLg9sz/1/

https://jsfiddle.net/itaymer/t8tLg9sz/1/embedded/result/

.wrapper { width: 90%; margin:0 auto; } 
.slider { 
    overflow:hidden;   
}
.slider:before {
    content:'a';
    display:block;
    height:100%;
    min-height:100px;
    width:100%;
    min-width:100px;
    background-image:url(http://derailed.progressionstudios.com/wp-content/uploads/2014/02/shutterstock_120154516-2000x700.jpg);
    background-size:cover;
    background-repeat:no-repeat;
}