DEV Community


Posted on

Simple way set watermark background image with SVG

Alt Text

If you set page background with watermark like post screenshot. you can follow my code :)

// js

const markTemplate = (name) => {
  return `<svg xmlns='' version='1.1' height='100px' width='100px'><text transform='translate(20, 100) rotate(-45)' fill='rgba(45,45,45,0.08)' font-size='18'>${name}</text></svg>`;

const base64Mark = btoa(markTemplate("ihavecoke")); = `url("data:image/svg+xml;base64,${base64Mark}")`;

Enter fullscreen mode Exit fullscreen mode

All is done, you can copy code then paste to chrome devtools console tab run it. background will changed :)

Refactor marketTemplate method custom more SVG attributes like font-size, width, height etc aslo good idea.

If you need same features hope help you :)

PS: You can found online Demo

Top comments (0)