Having trouble getting my watermark to align properly on the left side of my website's main content. Here is how it currently looks: https://i.sstatic.net/Nfhh5.png
The issue arises when I resize the screen or switch to mobile view, as the watermark ends up covering the main content. My goal is to have the watermark flush against the far left side of the screen and either disappear or not obstruct the main content when the screen size shrinks.
This is the code that I wrote:
<div id="background">
<p id="bg-text">Add watermark here.</p>
</div>
//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);
}
Struggling to understand why this is interfering with the main content. It's supposed to be a subtle watermark that only appears when necessary.