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 {_x000D_
height: 100%;_x000D_
background-image: url(http://www.horizonchampion.eu/themes/projectbase/images/bg.svg);_x000D_
background-size: 100% 100%;_x000D_
-o-background-size: 100% 100%;_x000D_
-webkit-background-size: 100% 100%;_x000D_
background-size: cover;_x000D_
}
_x000D_
<svg width="1024" height="800" xmlns="http://www.w3.org/2000/svg">_x000D_
<defs>_x000D_
<radialGradient fy="0.04688" fx="0.48047" r="1.11837" cy="0.04688" cx="0.48047" id="svg_2">_x000D_
<stop stop-color="#ffffff" offset="0"/>_x000D_
<stop stop-opacity="0" stop-color="#eaeaea" offset="1"/>_x000D_
</radialGradient>_x000D_
<radialGradient fy="0.04688" fx="0.48047" r="1.71429" cy="0.04688" cx="0.48047" id="svg_5">_x000D_
<stop stop-color="#ffffff" offset="0"/>_x000D_
<stop stop-opacity="0" stop-color="#eaeaea" offset="1"/>_x000D_
</radialGradient>_x000D_
</defs>_x000D_
<g display="inline">_x000D_
<title>Layer 1</title>_x000D_
<rect fill="#eaeaea" stroke-width="0" x="0" y="0" width="1024" height="800" id="svg_1"/>_x000D_
</g>_x000D_
<g>_x000D_
<title>Layer 2</title>_x000D_
<rect id="svg_3" height="282" width="527" y="1" x="1" stroke-width="0" fill="url(#svg_2)"/>_x000D_
<rect id="svg_4" height="698" width="1021.99999" y="1" x="1" stroke-width="0" fill="url(#svg_5)"/>_x000D_
</g>_x000D_
</svg>
_x000D_
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!
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.
Set Background svg with content/cart at center
.login-container {
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
background-image: url(/assets/images/login-bg.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
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;
}
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.
Source: Stackoverflow.com