Creating watermark using html and css

Question

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   Thanks in advance

User · Answer

To make it fixed  Try this way    jsFiddleLink  http   jsfiddle net PERtY    lt div class  body  gt 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      lt div class  watermark  gt             Sample Watermark      lt  div gt      This is a sample body     This is a sample bodyThis is a sample bodyThis is a sample body  lt  div gt      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

User · Answer

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

User · Answer

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

User · Answer

watermark    position fixed   bottom 5px   right 5px   opacity 0 5   z-index 99   color white      jSFiddle

User · Answer

you may use opacity 0 5   what ever you wish between 0 and 1 for this   working Fiddle

User · Answer

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   lt div class  quot grid-div quot  gt       lt p class  quot hello quot  gt Hello lt  p gt       lt p class  quot world quot  gt World lt  p gt   lt  div gt      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  quot Hello quot  in the bottom right  and the  quot World quot  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

[html] Creating watermark using html and css

Examples related to html

Examples related to css

Examples related to watermark