title: CSS SVG-file remove padding when used as background-image
body: <p>I'm trying to take a logo that I have and introduce it inside an element on the page as a background-image for that element. However the image gets "padded" and the logo comes out extremely small. Are there any good solutions for this problem?</p>
  
  <p><a href="https://i.stack.imgur.com/JbOOp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JbOOp.png" alt="Picture of how it looks atm."></a></p>
  
  <p><a href="https://i.stack.imgur.com/rQj4D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rQj4D.png" alt="Picture of the div&#39;s dimensions."></a></p>
  
  <p><a href="http://svgur.com/s/78t" rel="nofollow noreferrer">And the source SVG.</a></p>
  
  <p>Here is the current css:</p>
  
  <pre><code>/* Searchbardiv */
  .searchbarContainer{
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100px;
  }
  /* logoDiv */
  .logo {
      background-image: url("/static/images/logo/LiquidMarket.svg");
      background-repeat: no-repeat;
      background-size: cover;
      margin: 0;
      padding: 0;
      width: 100px;
      height: 100px;
      float: left;
  }
  </code></pre>
  
  <p>and the html:</p>
  
  <pre><code>&lt;div class="searchbarContainer"&gt;
    &lt;div class="logoAndLinks"&gt;
      &lt;div class="logo"&gt;
      &lt;/div&gt;
      &lt;div class="buttonNavigation"&gt;
        &lt;div class="dropdown"&gt;
          &lt;button (clickOutside)="onClickedOutside($event)" (click)="dropfunction('myDropdown0')" id="dropbtn0" class="dropbtn"&gt;Home&lt;/button&gt;
          &lt;div id="myDropdown0" class="dropdown-content"&gt;
              &lt;a routerLink="/"&gt; Index &lt;/a&gt;
              &lt;a routerLink="/profile"&gt;Profile&lt;/a&gt;
              &lt;div *ngIf="currentUser"&gt;
                &lt;a routerLink="/login"&gt;Logout&lt;/a&gt;
              &lt;/div&gt;
              &lt;div *ngIf="!currentUser"&gt;
                &lt;a routerLink="/login"&gt;Login&lt;/a&gt;
                &lt;a routerLink="/register"&gt;Register&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="dropdown"&gt;
          &lt;button (clickOutside)="onClickedOutside($event)" (click)="dropfunction('myDropdown1')" id="dropbtn1" class="dropbtn"&gt;My invoices&lt;/button&gt;
          &lt;div id="myDropdown1" class="dropdown-content"&gt;
              &lt;a routerLink="/invoices"&gt; Invoices &lt;/a&gt;
              &lt;a routerLink="/registerinvoice"&gt;Register invoice&lt;/a&gt;
              &lt;a routerLink="/orders"&gt;Orders&lt;/a&gt;
              &lt;a routerLink="/transactions"&gt;Transactions&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="dropdown"&gt;
          &lt;button (clickOutside)="onClickedOutside($event)" (click)="dropfunction('myDropdown2')" id="dropbtn2" class="dropbtn"&gt;Marketplace&lt;/button&gt;
          &lt;div id="myDropdown2" class="dropdown-content"&gt;
            &lt;a routerLink="/ordering"&gt;Place order&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Solved by opening the image in Gedit and adjusting viewbox from: <code>viewBox="0 0 800 600"</code> to <code>viewBox="200 200 400 200"</code></p>