title: relative path to images not working in CSS
body: <p>My css file is in: <code>media</code> folder.
  my images are in: <code>media/msg</code> folder.</p>
  
  <p><a href="https://i.stack.imgur.com/mzMmD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mzMmD.png" alt="enter image description here"></a><br>
  This is the setting of the css file:</p>
  
  <pre><code>.info {
      color: #00529B;
      border-color: #789FCC;
      background-color: #CDEAF7;
      background-image: url('/msg/info.png');
  }
  
  .success {
      color: #264409;
      border-color: #C6D880;
      background-color: #E6EFC2;
      background-image:url('/msg/success.png');
  }
  
  .warning {
      color: #514721;
      border-color: #FFD324;
      background-color: #FFF6BF;
      background-image: url('/msg/warning.png');
  }
  
  .error {
      color: #8A1F11;
      border-color: #FBC2C4; 
      background-color: #FBE3E4;
      background-image: url('/msg/error.png');
  </code></pre>
  
  <p>The images are not loading.
  When I do "inspect element" from browser it tells me "could not load the image".</p>
  
  <p>as far as I know it should take the relative path of my css file and add the path to the image... but it doesn't work.</p>
  
  <p>What do I do?</p>