35

What I need is to create cross website transparent watermark like this using only html and css. Have no idea how to keep that always in one place for ex: right bottom side of browser window.

enter image description here

starball
  • 20,030
  • 7
  • 43
  • 238
demonoid
  • 318
  • 3
  • 13
  • 40

7 Answers7

51
#watermark
{
 position:fixed;
 bottom:5px;
 right:5px;
 opacity:0.5;
 z-index:99;
 color:white;
}

jSFiddle

ElendilTheTall
  • 1,344
  • 15
  • 23
4

To make it fixed: Try this way,

jsFiddleLink: http://jsfiddle.net/PERtY/

<div class="body">This is a sample body This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample bodyThis is a sample bodyThis is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    v
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    <div class="watermark">
           Sample Watermark
    </div>
    This is a sample body
    This is a sample bodyThis is a sample bodyThis is a sample body
</div>



.watermark {
    opacity: 0.5;
    color: BLACK;
    position: fixed;
    top: auto;
    left: 80%;
}

To use absolute:

.watermark {
    opacity: 0.5;
    color: BLACK;
    position: absolute;
    bottom: 0;
    right: 0;
}

jsFiddle: http://jsfiddle.net/6YSXC/

Arunkumar Srisailapathi
  • 1,139
  • 2
  • 8
  • 27
2

you may use opacity:0.5;//what ever you wish between 0 and 1 for this.

working Fiddle

Green Wizard
  • 3,507
  • 4
  • 18
  • 29
0

Other solutions are great but they didn't take care of the fact that watermark shouldn't get selected on selection from the mouse. This fiddle takes care or that: https://jsfiddle.net/MiKr13/d1r4o0jg/9/

This will be better option for pdf or static html.

CSS:

#watermark {
  opacity: 0.2;
  font-size: 52px;
  color: 'black';
  background: '#ccc';
  position: absolute;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  right: 5px;
  bottom: 5px;
}
MiKr13
  • 1,297
  • 13
  • 20
0

.watermark{
color:yellow;
background-color:rgba(255, 0, 0, 0.5);
height:30px;
width:100px;
display:flex;
align-items:center;
justify-content:center;
position:fixed;
bottom:5px;
right:5px;
}
<html>
<body>
<div class="watermark">
KwalityWorld
</div>
<pre>

































</pre>
</body>
</html>
KrushnalPatil
  • 1
  • 1
    Welcome to Stack Overflow! Code-only answers are not particularly helpful. Please add some descriptions of how this code solves the problem and format your code correctly. – Sven Eberth Jun 05 '21 at 15:52
-2

I would recommend everyone look into CSS grids. It has been supported by most browsers now since about 2017. Here is a link to some documentation: https://css-tricks.com/snippets/css/complete-guide-grid/ . It is so much easier to keep your page elements where you want them, especially when it comes to responsiveness. It took me all of 20 minutes to learn how to do it, and I'm a newbie!

<div class="grid-div">
    <p class="hello">Hello</p>
    <p class="world">World</p>
</div>


//begin css//

.grid-div {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
}

.hello {
    grid-column-start: 2;
    grid-row-start: 2;
}

.world {
    grid-column-start: 1;
    grid-row-start: 2;
}

This code will split the page into 4 equal quadrants, placing the "Hello" in the bottom right, and the "World" in the bottom left without having to change their positioning or playing with margins.

This can be extrapolated into very complex grid layouts with overlapping, infinite grids of all sizes, and even grids nested inside grids, without losing control of your elements every time something changes (MS Word I'm looking at you).

Hope this helps whoever still needs it!

PsiKai
  • 1,803
  • 1
  • 5
  • 19
  • That code won't provide either the overlapping (it actively works to prevent overlapping!) or the translucency that the question asks for. (It might be possible to use CSS Grid as part of a solution to the problem the question is asking about, but you haven't) – Quentin Aug 17 '20 at 20:13
  • I used css grids just today to build a water mark on my page (that's the question on this post btw) that overlapped with other elements, so I have no idea what you're talking about. Besides, the code example I gave was not to solve the problem but to illustrate how easy grid works; I thought that was clear from my description.... – PsiKai Aug 18 '20 at 02:30
-4

Possibly this can be of great help for you.

div.image
{
width:500px;
height:250px;  
border:2px solid;
border-color:#CD853F;
}
div.box
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid;
border-color:#CD853F;
opacity:0.6;
filter:alpha(opacity=60);
}
   div.box p
{
margin:30px 40px;
font-weight:bold;
color:#CD853F;
}

Check this link once.

Guillermo Gutiérrez
  • 17,273
  • 17
  • 89
  • 116
user2804021
  • 151
  • 5