title: How to set background-color on 50% of area CSS
body: <p>I want to have a div, and inside this div must be a field with some color. So i want to have div for example 200px x 200px and set background-color:gray which size ll be 100px x 100px, and start at position 50px 50px.</p>
  
  <p>Please look at this snippet with code:</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>div{
      background-color: gray;
      background-size: 100px 100px;
      background-position: 50px 50px;
      
      min-width:200px!important;
      min-height:200px!important;
      max-width:200px!important;
      max-height:200px!important; 
        
      padding:50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;some text&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So as You see the background color filled all div width and height.
  Is this possible to make background to fill only 50%?
  <a href="https://i.stack.imgur.com/6fkyP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6fkyP.png" alt="enter image description here"></a></p>
  
  <p>Note: The red area should be transparent.</p>