Rubber background pictures?

Question

css

Good day, tell me, who knows a ready-made plugin for reponsive background images? I need the image to maintain its proportionality at different screen resolutions. I set it up manually with background-size : 100% auto and a bunch of mediaqueries. But every time you have to do it in a new way. It's a pity to waste time. And you can't find it on the Internet.

Answer 1

background-size: cover
Am I missing something?

Answer 2

<div class="intro">
  <img src="..." class="intro-bg">
  <div class="intro-content">
    ...
  </div>
</div>

.intro {
  position: relative;
}

.intro-bg {
  max-width: 100%;
  height: auto;
}

.intro-content {
  position: absolute;
  top 0; left 0;
  width: 100%;
  height: 100%;
}

Maybe this option will work? True, he will not crop the picture.
Or you can try using viewport units: caniuse.com/#feat=viewport-units, but there is IE9+.

Answer 3

div{
background: url(../images/fon.png) no-repeat scroll center 0 / cover;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%
z-index: 0;
}