how to set svg as a background image

This question already has an answer here:

Stretch and scale a CSS image in the background - with CSS only 18 answers

---

CSS rule

background-image: url('file.svg');

To make your SVG scale you should use percentages for your measurements where possible. For instance if you want to make a gradient that fills the whole background:

file.svg

<?xml version="1.0" encoding="utf-8"?>
<svg width="100%" height="100%">
    <defs>
        <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(192,192,192);stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" />
</svg>

You may also want to look into responsive CSS with media queries if this doesn't provide enough control. You can use it to change it to different SVGs. This CSS section targets screens that are 800px wide at most:

@media screen and (max-width: 800px) {
    body {
        background-image: url('file800.svg');
    }
}

Another tool at your disposal is the background-size rule. It's a CSS 3 rule so you might want to look at the level of support for different browsers.

链接地址: http://www.djcxy.com/p/89212.html

上一篇: 防止背景重复

下一篇: 如何将svg设置为背景图片