title: Watermark align content to the extreme left
body: <p>I have made a watermark that is aligned to left of the main content in my website. While I am unable to adjust it properly due to some missing CSS attributes.
  This is the current look of website:
  <a href="https://i.stack.imgur.com/Nfhh5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nfhh5.png" alt="enter image description here" /></a></p>
  <p>But when I try to minimise the screen, or go to mobile mode, this watermark is covering on top of the main content. I wish to have a water mark to the extreme left of screen and when it minimises it should either disappear or not have to be covering the main content.</p>
  <p>This is the code that I currently worte:</p>
  <pre><code>&lt;div id=&quot;background&quot;&gt;
      &lt;p id=&quot;bg-text&quot;&gt;Add watermark here.&lt;/p&gt;
  &lt;/div&gt;
  //CSS:
  #background{
    position:fixed;
    z-index: 100000;
    background:white;
    top: 400px;
    left: 0px;
  }
  
  #bg-text
  {
      color:lightgrey;
      font-size:10px;
      transform:rotate(-90deg);
      -webkit-transform:rotate(-90deg);
  }
  </code></pre>
  <p>Do not know why this is interfering with the main content. It should serve as watermark and disappear when not needed.</p>