📚 Random Text Background (random-text-bg)

Add randomly scattered and selectable text across your webpage as a subtle, dynamic background layer. Great for watermarks, testing overlays, or playful visual effects.

✨ Features

• 📌 Random positioning of each word on screen
• 🔄 Optional random rotation of words
• 🖋️ Fully selectable background text (appears in text selection)
• 🎨 Customizable font, color, and word count
• 🚫 Non-intrusive — doesn't block page content
• ⚡ Lightweight and framework-agnostic (pure JavaScript)

🚀 Installation

Using CDN (via jsDelivr)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/random-text-bg.min.js"></script>

⚙️ Configuration Options

You can pass an options object to the RandomTextBg() function to customize how the background text is rendered.

Options

text (string, default: '') The input string of words to scatter. Words are split by spaces.

color (string, default: 'rgba(0, 0, 0, 0.05)') The color of each word. Use RGBA for transparency.

fontSize (string, default: '2rem') Font size for each word (e.g., '1.5rem', '20px').

fontFamily (string, default: 'monospace') Font family used for rendering the text.

zIndex (number, default: 0) CSS z-index of the background container. Use -1 to push it behind all content.

randomizeRotation (boolean, default: true) Randomly rotate each word. Set to false for no rotation.

maxWords (number, default: 1000) Maximum number of words to display from the input string.

textSelectable (boolean, default: false) Determines whether the scattered text is selectable. Set to true to allow users to highlight and copy the text.

target (HTMLElement, default: document.body) Specifies the DOM element where the randomized background text should be rendered.

Example

RandomTextBg({
    text: 'random text that we want to laod in the background',
    color: 'rgba(150, 150, 150, 0.5)',
    fontSize: '1.5rem',
    maxWords: 1000,
    textSelectable: true,
    target: document.querySelector('some_dom_element'),
    zIndex: 1
});