Hi this is my first question on Stack Owerflow. I am trying to solve a challenge on Frontend Mentor. 
I have made a container with 2 columns, and I want to place a SVG background image on the left col. 
I have tried to insert the SVG in the HTML file, and it worked, but when I use CSS nothing happens. 
This is the code:

'''

```
<body>
  <div class="container-fluid">  
     <div class="row"> 
       <div class="col-7 left">
        <h1> We're coming soon</h1>

      Hello fellow shoppers! We're currently building our new fashion store.
      Add your email below to stay up-to-date with announcements and our launch deals.

      Email Address
       </div>

     <!-- Right side -->
    <div class="col-5">
      <img src="images/hero-desktop.jpg">
    </div>
    </div>
   </div>
</body>

.left{
    background-image: url('images/bg-pattern-desktop.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
}

```

'''

Can anyone help me. 

Feel free to comment on my frist question.

Thanks 
Karsten