SVG as background image

• 📘 background-size

• 📘 text-shadow

• 👉 <linearGradient>

💾 https://replit.com/@pegasusroe/svg-bg-image

code

📂 style.css

header { 
     
    /* ⭐️ SVG as background image */
    background: url(svg/gradients.svg);
    background-size: contain;

    border-radius: .5em;
}

h1 {
    color: #ffffff;
    text-align: center;

    /* x, y, blur, color */
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8);
}

index.html

<header>
    <h1>SVG as background image</h1>
</header>