Creating watermark using html and css

Asked 30/1, 2014 at 13:42 Answered 5/6, 2021 at 13:3

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

Installment answered 30/1, 2014 at 13:42 Comment(7)

You should apply opacity: .6; for example and position absolute the div. – Hyper 30/1, 2014 at 13:44

For watermarks you can probably go for div's with some styling and position it to be fixed in the place you like. Since you wanted only html and css this could do. – Ireful 30/1, 2014 at 13:44

@srekoble maybe jsfiddle? – Installment 30/1, 2014 at 13:44

@ArunKumar can you apply it on jsfiddle? – Installment 30/1, 2014 at 13:45

If you want your watermark to be always seen despite scrolling go for fixed positioning – Ireful 30/1, 2014 at 13:45

maybe this can help jsfiddle.net/98jdF – Kemme 30/1, 2014 at 13:46

You might find a clear solution here:#8566469 – Aisha 2/1, 2018 at 22:23

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

jSFiddle

Rheo answered 30/1, 2014 at 13:46 Comment(2)

I need something that allways keep same place even when scrolling – Installment 30/1, 2014 at 14:11

^ That does do that - sorry the Fiddle didn't update. Try it now. – Rheo 30/1, 2014 at 14:11

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/

Ireful answered 30/1, 2014 at 13:49 Comment(0)

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

working Fiddle

Dignadignified answered 30/1, 2014 at 13:51 Comment(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;
}

Latinist answered 21/7, 2020 at 19:28 Comment(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>

Peyote answered 5/6, 2021 at 13:3 Comment(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. – Milore 5/6, 2021 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!

Stimson answered 17/8, 2020 at 20:2 Comment(2)

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) – Scoreboard 17/8, 2020 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.... – Stimson 18/8, 2020 at 2: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.

Decentralization answered 30/1, 2014 at 14:20 Comment(0)

Recommended topics

Hot tags