Using SVG as background image

Question

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? Thanks!

Answer 1

With my solution you're able to get something similar:

Here is bulletproff solution:

Your html: <input class='calendarIcon'/>

Your SVG: i used fa-calendar-alt

(any IDE may open svg image as shown below)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">   <path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/> </svg> 

To use it at css background-image you gotta encode the svg to address valid string. I used this tool (name: URL Decoder—Convert garbled address)

As far as you got all stuff you need, you're coming to css

.calendarIcon{       //your url will be something like this:       background-image: url("data:image/svg+xml,***<here place encoded svg>***");       background-repeat: no-repeat;     } 

Note: these styling wont have any effect on encoded svg image

.{       fill: #f00; //neither this       background-color: #f00; //nor this } 

because all changes over the image must be applied directly to its svg code

<svg xmlns="" path="" fill="#f00"/></svg>

To achive the location righthand i copied some Bootstrap spacing and my final css get the next look:

.calendarIcon{       background-image: url("data:image/svg+xml,%3Csvg...svg%3E");       background-repeat: no-repeat;       padding-right: calc(1.5em + 0.75rem);       background-position: center right calc(0.375em + 0.1875rem);       background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);     } 

Answer 2

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.