title: Background image change width and height on different sizes
body: <p>I have an image slider what runs background in my page.  My problem is that images zooms to much on smaller screens. Maybe there is a way how I can change width or height of image so it looks more better and images are not totally zoomed in. As I am not very professional on responsive designs especially on responsive images, maybe someone can give me good advise. </p>
  
  <p>This is how my project looks like.  Screen is taken from HD monitor, but on my laptop its way to much zoomed in and some images are hard to understand.
  <a href="https://i.stack.imgur.com/wKafY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wKafY.png" alt=""></a></p>
  
  <p>CSS what is used for images: </p>
  
  <pre><code>.sequence .slide-image &gt; img {
    max-width: inherit;
    display: block;
    /*height:auto;*/
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%;
    min-height: 50%;
  }
  </code></pre>
  
  <p>HTML part : </p>
  
  <pre><code>&lt;div class="slide-image scale"&gt;
    &lt;img src="$KBImage" alt="Welcome to the Loyale"/&gt;
  &lt;/div&gt;
  </code></pre>