responsive background with min and max

I want make a responsive background with image when I used background-size: contain; in small screen that was awesome but in large screen my image is too large. how I can Determine maximum width and height just using HTML and CSS.

You can use a media query to switch background-size depending on screen size. For example, if your image is 640px wide:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  min-height: 100vh;
  background-image: url(http://placekitten.com/640/480);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
@media(min-width: 640px) {
  body {
    background-size: auto;
  }
}

<!-- end snippet -->

You can use media queries in your css.

@media (background-size: contain){
    // rules for when the background-size: contain is applied
}