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;}<svg width="1024" height="800" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient fy="0.04688" fx="0.48047" r="1.11837" cy="0.04688" cx="0.48047" id="svg_2"><stop stop-color="#ffffff" offset="0"/><stop stop-opacity="0" stop-color="#eaeaea" offset="1"/></radialGradient><radialGradient fy="0.04688" fx="0.48047" r="1.71429" cy="0.04688" cx="0.48047" id="svg_5"><stop stop-color="#ffffff" offset="0"/><stop stop-opacity="0" stop-color="#eaeaea" offset="1"/></radialGradient></defs><g display="inline"><title>Layer 1</title><rect fill="#eaeaea" stroke-width="0" x="0" y="0" width="1024" height="800" id="svg_1"/></g><g><title>Layer 2</title><rect id="svg_3" height="282" width="527" y="1" x="1" stroke-width="0" fill="url(#svg_2)"/><rect id="svg_4" height="698" width="1021.99999" y="1" x="1" stroke-width="0" fill="url(#svg_5)"/></g></svg>Is it possible to do this with just CSS3? I'd like to not have to load ANOTHER JS library or call...Any ideas?