# SVG as background image

* :blue\_book: [background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)
* :blue\_book: [text-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow)
* :point\_right: [\<linearGradient>](../gradient/linear)

:floppy\_disk: [https://replit.com/@pegasusroe/svg-bg-image](https://replit.com/@pegasusroe/svg-bg-image#style.css)

{% tabs %}
{% tab title="code" %}
:open\_file\_folder: style.css

```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);
}
```

{% embed url="https://codepen.io/lochiwei/pen/yLbrzvv" %}


{% endtab %}

{% tab title="index.html" %}
```markup
<header>
    <h1>SVG as background image</h1>
</header>
```
{% endtab %}
{% endtabs %}
