How to get background image/ image to stretch to fill container via CSS?
background-image, css, html, svg
Solution
Have you tried
background-size:cover;
Check some examples.
I had issues with webkit, `background-size:cover` and SVG background images. I solved it adding
-webkit-background-origin:border;
Problem
I have a scale vector image and I want it to fill a container. There's a couple of these sort of questions on SO, although they are a tad old. E.g. Stretch and scale CSS background However, when I've attempted to implement such solutions the results have been disappointing. For instance: ``` body { margin: 0; padding: 0; text-align: center; color: #000; background-color: #000 font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; } ... .twoColLiqLtHdr #container { width: 80%; margin: 0 auto; border: 2px solid #000000; text-align: left; background-color: #003; background-image: url('background_image.svg'); /*background-position: 80% 80%; */ background-repeat: no-repeat; color: #000; font-family: "Times", cursive; background-attachment:fixed; min-height:100%; /*top: 0; left: 0; */ } ``` I've tried various arrangements but I cannot make it stretch without leaving blank areas (repeating is a success of sorts, but looks horrible). However, since I'm working with a svg am I approaching this in perhaps the wrong way, should I be using a svg xmlns tag in the html instead? (P.S. I'm aware of IE8's absolute inability to handle svgs)