title: Responsive Padding with Background-Image
body: <p>I'm trying to make a full width and height responsive home page with an image. The problem I'm encountering are padding issues. I cannot get padding to work when I display an image in css under 'background-image: url();'. The only thing that works is the margin property but it is not responsive to the height and only shows the top and the rest as I scroll down but I am trying to have the padding be responsive to the resizing of the height of the page. To show you guys more of what I am trying to achieve, I included 2 examples, the top with what I want and the second with the problem I'm facing. I've managed to get responsive padding to work while I place the img tag in my HTML but I cannot do so with the background-image property as I'm trying to put text on it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .test img{
      width: 100%;
      max-width: 100%;
      height: 100vh;
      padding: 10px;
      }
  
      .wrapper {
      background-image: url(https://images4.alphacoders.com/432/43258.jpg);
      height: 100vh;
      width: 100%;
      max-width: 100%;
      background-size: cover;
      background-position: center center;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt;
  &lt;img src="https://images4.alphacoders.com/432/43258.jpg" alt=""&gt;
  &lt;/div&gt;
  
  &lt;div class="main"&gt;
  &lt;div class="wrapper"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/u9t4hqqq/" rel="nofollow noreferrer">https://jsfiddle.net/u9t4hqqq/</a></p>