问题:

I can't seem to get this to work as desired. My page changes height based on what content is loaded and if it requires a scroll, the svg doesn't seem to be stretching...

html {   height: 100%;   background-image: url(http://www.horizonchampion.eu/themes/projectbase/images/bg.svg);   background-size: 100% 100%;   -o-background-size: 100% 100%;   -webkit-background-size: 100% 100%;   background-size: cover; }

                                                                                                                                                                  <span class="pln" bdsfid="271">Layer 1</span>                                               <span class="pln" bdsfid="276">Layer 2</span>

Is it possible to do this with just CSS3? I'd like to not have to load ANOTHER JS library or call...Any ideas? Thanks!

回答1:

You can try removing the width and height attributes on the svg root element, adding preserveAspectRatio="none" viewBox="0 0 1024 800" instead. It makes a difference in Opera at least, assuming you wanted the svg to stretch to fill the entire region defined by the CSS styles.

回答2:

Try placing it on your body

body {     height: 100%;     background-image: url(../img/bg.svg);     background-size:100% 100%;     -o-background-size: 100% 100%;     -webkit-background-size: 100% 100%;     background-size:cover; }

回答3:

You have set a fixed width and height in your svg tag. This is probably the root of your problem. Try not removing those and set the width and height (if needed) using CSS instead.

转载请标明出处:Using SVG as background image

文章来源: Using SVG as background image

标签

background

svg

background-size